Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Layout Weirdness in Firefox/Camino but OK in Safari...
Hi,
Help me CSS gurus!
I’ve finished a new layout for my blog at davidhughes.org which looks great in Safari, OK in IE but one element breaks on Firefox/Camino – the search box.
I have a div called header with two divs inside that logo which floats left and search which floats right – beneath that is another div called navigation which clears both.
Why does this not display correctly in Firefox?
Help me Obi Wan help me…
THANKS!
Last edited by djahughes (2007-04-02 17:23:50)
David Hughes
davidhughes.org
Offline
Re: Layout Weirdness in Firefox/Camino but OK in Safari...
Just apply any width to #search, such as:
#search {
width: 300px; /*or even width: 1%*/
}Offline
Re: Layout Weirdness in Firefox/Camino but OK in Safari...
Awesome!
Thanks very much.
Can you explain why that is required; I like to understand the changes if possible.
Many thanks!
David Hughes
davidhughes.org
Offline
Re: Layout Weirdness in Firefox/Camino but OK in Safari...
If I recall correctly, all of the elements in #header were block (display: block=100% width) with no width applied. Block elements, such as lists, headers, divs, and paragraphs fill up 100% of the container unless a width is specified. Here’s a superfluous plain text illustration of block:
#header:
- - - - - - - - - - - - - - -
| [- - - - - #logo - - - - - ]
| [- - - - #search - - - - ]
- - - - - - - - - - - - - - - When both elements are floated, they can sit next to each other, unless one is too wide. To overcome this, apply a width to both divs. Here’s a simple HTML example – view it in Safari, then add portions of lorem ipsum text to see the effects.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<style type="text/css">
div {
float: left;
}
#one {
background: #fc0;
}
#two {
background: #0cf;
}
</style>
<title>Floaters</title>
</head>
<body>
<div id="one">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="two">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>The above will not line up horizontally, until you apply a width (Internet Explorer would probably need 49.5% or less):
div {
width: 50%;
float: left;
}Hope that helps, as unclear as it might be!
Offline
Re: Layout Weirdness in Firefox/Camino but OK in Safari...
Great!
Thanks very much.
I love being able to get help here but it’s even better if I can understand why the change is required and learn from it.
Many thanks for taking teh time to explain.
Thanks
David Hughes
davidhughes.org
Offline