Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

LordCash · 03-01-2011, 12:28

Ich schildere euch mal folgendes Problem:

In der Mitte befindet sich Text und darunter eine Linie. Beides befindet sich jeweils in einem Div.

Wenn ich mit dem Safari die Seite jetzt kleiner Skaliere dann lappt der Text über das Div der Linie. Woran kann das liegen und wie kann ich das Problem lösen?

Dharokan · 03-01-2011, 12:35

Da versagt meine Kristallkugel leider.

Im Ernst: Ein bisschen mehr Info musste schon mitgeben, sonst können wir uns hier höchstens den Wolf raten.

Wie sind die Sachen denn positioniert? (vielleicht eines mittels em und eines prozentual?) Zeig mal den CSS code.

EDIT: Und was heißt denn komisch? Beziehungsweise welcher Browser stellt es denn für Dich "richtig" dar?

Grüße!

LordCash · 03-01-2011, 15:54

Wenn ich im Firefox mit Strg - rauszoome skaliert er den Text wirklich immer mit.

Im Safari hört er aber irgendwann aus den Text zu skalieren und so bricht das layout auseinander.

Woran kann das liegen? Ich habe eine feste font-size:14px; verwendet.

Dharokan · 03-01-2011, 16:50

So rein theoretisch habe ich keine Idee, tut mir leid.

LordCash · 03-01-2011, 17:06

Hier habe ich den Fehler mal rekonstruiert:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/base.css" rel="stylesheet" type="text/css" />
<title>Unbenanntes Dokument</title>
</head>
<div id="space"></div>
<div id="line"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
<div id="line"></div>
<body>
</body>
</html>

Und die CSS Datei:

PHP-Code:

  @charset "utf-8";

body { font-size:100.01%; }
body { background-color: #fff; }
body { text-align: center; }
body { font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#666; }


#space { height:50px; }
#placeholder { height:17px; }


#line{
    position:relative;
    margin:0px;
    width:100%;
    height:2px;
    background-color:#c5c6c8;
    line-height:1px;
    font-size:0px;
    z-index:1;
}

#content {
    margin: 0 auto 0 auto;
    padding: 17 0 17 0;
    height:404px;
    width:810px;
    z-index:1;
}

Wenn ich im Safari jetzt mit Strg - ganz raus zoome schiebt sich die linie unter den Text und das darf ja so nicht sein.

Dharokan · 03-01-2011, 17:29

Kann das i.M. nicht am Mac testen. Allerdings ist das schon arg seltsames CSS. Kannst Du die Linie besser mit 'nem Rahmen machen?

PHP-Code:

  border-top: 2px solid #c5c6c8;

Dann könntest Du Dir die beiden Divs space und linie sparen.

Aber vielleicht wirkt das ja auch nur aufgrund der Vereinfachung so

Kleine Fehlerchen:
Die font-size im body ist zweimal definiert.

Beim Padding von #content fehlt dach der 17 die Maßeinheit (px?). Das könnte vielleicht auch schon die Fehlerquelle sein. Einfach mal ausprobieren...

Mehr kann ich nicht helfen.

Gruß,

03-01-2011, 12:28	#1 (permalink)
LordCash Pixelschubser Registriert seit: Aug 2002 Ort: Utopia Beiträge: 416	Safari skaliert komisch Ich schildere euch mal folgendes Problem: In der Mitte befindet sich Text und darunter eine Linie. Beides befindet sich jeweils in einem Div. Wenn ich mit dem Safari die Seite jetzt kleiner Skaliere dann lappt der Text über das Div der Linie. Woran kann das liegen und wie kann ich das Problem lösen?

03-01-2011, 12:35	#2 (permalink)
Dharokan Alter User Registriert seit: Jul 2003 Ort: Dortmund Beiträge: 719	Da versagt meine Kristallkugel leider. Im Ernst: Ein bisschen mehr Info musste schon mitgeben, sonst können wir uns hier höchstens den Wolf raten. Wie sind die Sachen denn positioniert? (vielleicht eines mittels em und eines prozentual?) Zeig mal den CSS code. EDIT: Und was heißt denn komisch? Beziehungsweise welcher Browser stellt es denn für Dich "richtig" dar? Grüße! __________________ Dharokan Geändert von Dharokan (03-01-2011 um 12:45 Uhr)

03-01-2011, 16:50	#4 (permalink)
Dharokan Alter User Registriert seit: Jul 2003 Ort: Dortmund Beiträge: 719	So rein theoretisch habe ich keine Idee, tut mir leid. __________________ Dharokan

03-01-2011, 17:29	#6 (permalink)
Dharokan Alter User Registriert seit: Jul 2003 Ort: Dortmund Beiträge: 719	Kann das i.M. nicht am Mac testen. Allerdings ist das schon arg seltsames CSS. Kannst Du die Linie besser mit 'nem Rahmen machen? PHP-Code: `border-top: 2px solid #c5c6c8;` Dann könntest Du Dir die beiden Divs space und linie sparen. Aber vielleicht wirkt das ja auch nur aufgrund der Vereinfachung so Kleine Fehlerchen: Die font-size im body ist zweimal definiert. Beim Padding von #content fehlt dach der 17 die Maßeinheit (px?). Das könnte vielleicht auch schon die Fehlerquelle sein. Einfach mal ausprobieren... Mehr kann ich nicht helfen. Gruß, __________________ Dharokan Geändert von Dharokan (03-01-2011 um 17:32 Uhr)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

03-01-2011, 15:54	#3 (permalink)
LordCash Pixelschubser Registriert seit: Aug 2002 Ort: Utopia Beiträge: 416	Wenn ich im Firefox mit Strg - rauszoome skaliert er den Text wirklich immer mit. Im Safari hört er aber irgendwann aus den Text zu skalieren und so bricht das layout auseinander. Woran kann das liegen? Ich habe eine feste font-size:14px; verwendet.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
komisch...	JMB	ActionScript 2	6	25-04-2007 16:28
komisch komisch -schriften einbetten in Flash 8	hilestia	Flash 8	3	08-06-2006 13:00
komisch	m1cha	ActionScript 1	3	20-04-2003 13:32
Komisch	LordCash	Flash MX	3	11-12-2002 12:17
komisch komisch	the-ox	ActionScript 1	2	03-07-2002 18:42