Divs Won't Sit On Same Line in IE

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

rfox@scoe.net - 26 Jul 2006 01:30 GMT

My parade of IE problems continues.

I have two divs in the banner area of my website, one containing a
photograph, the other the title and logo for the program. (Please see
http://www4.scoe.net/rfox/nest ) In every other browser, the divs sit
nicely right next to each other. But in IE, the logo area jumps down
to the next line. If I expand the width of the div that they sit in,
they stay on the same line, but that introduces ugly areas where the
background shows through. How can I get them to sit next to each other
in IE like they do everywhere else?

Thanks.

-Ray

Reply to this Message

Jim Moe - 26 Jul 2006 06:46 GMT

> My parade of IE problems continues.
>
[quoted text clipped - 6 lines]
> background shows through. How can I get them to sit next to each other
> in IE like they do everywhere else?

top { width: 725px }
img1 { width: 162px }
img2 { width: 563px }
The width of the two images exactly equal the width of the <div id="top">.
IE does poorly with 100% usage of anything.
Change the background color of "top", expand the width of top or reduce
the width of the images.

Or do not use "snapshot" at all.
<div id="top">
<img src="t_files/photo6.jpg" alt="" border="0"
height="104" width="162"><img src="t_files/homeq.jpg"
alt="Pleasanton Unified School District - NEST"
height="104" width="563">
</div>
The <img> has no newline in front of it to prevent whitespace from
showing between the images.

Signature

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

rfox@scoe.net - 26 Jul 2006 18:51 GMT

> Change the background color of "top", expand the width of top or reduce
> the width of the images.

Jim, thank you for the suggestions. I trimmed the size of the banner
and added a background-image to match the banner to fill in the white
space that appeared. Of course, IE insisted on putting the gap between
the image and the title graphic while everyone else placed the gap
after the title graphic, but a bit of image manipulation solved that
problem. See http://www4.scoe.net/rfox/nest for the fixed version.

I attempted your second suggestion, but I'm afraid you lost me with
"The <img> has no newline in front of it..." :/

My only complaint at this point is that IE (and only IE) now adds a gap
between the banner and the main body, visible in the yellow side bar.
Is there any way to get rid of that?

Many thanks for your help. :)

-Ray

Reply to this Message

Chris F.A. Johnson - 26 Jul 2006 19:33 GMT

>> Change the background color of "top", expand the width of top or reduce
>> the width of the images.
[quoted text clipped - 5 lines]
> after the title graphic, but a bit of image manipulation solved that
> problem. See http://www4.scoe.net/rfox/nest for the fixed version.

There are still problems:
<http://cfaj.freeshell.org/web/examples/scoe.jpg>

I made a start at fixing it (as usual, getting rid of unnecessary
"width: ...px:" styling goes a long way):

<http://cfaj.freeshell.org/web/examples/scoe.html>

Signature

Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

Reply to this Message

Jim Moe - 26 Jul 2006 23:12 GMT

> I attempted your second suggestion, but I'm afraid you lost me with
> "The <img> has no newline in front of it..." :/

I was referring to this part of the code:
...width="162"><img src=...
instead of
...width="162">
<img src=...

There is no newline the bring <img> to the next line. Browsers treat
newlines like space characters so there would be a gap between the images.
Try this:
<div id="top">
<script type="text/javascript"
src="t_files/random_header.js"></script><img src="t_files/photo1.jpg"
alt="" border="0" height="104" width="162">
<noscript><img src="images/photo1.jpg"
width="162" height="104" border="0" ... >
</noscript><img id="banner"
src="t_files/home2q.jpg" ... >
</div>

> My only complaint at this point is that IE (and only IE) now adds a gap
> between the banner and the main body, visible in the yellow side bar.
> Is there any way to get rid of that?

.about a { display:block; width:95px; height: 50px; ... }
Height should be 22px like the rest.
I am not clear why you have a separate class for every menu item. It
seem quite unnecessary and, in this case, counterproductive. In fact,
since you fix the width to a given number of pixels, the menu layout looks
quite bad when the text size is increased.

Signature

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

rfox@scoe.net - 27 Jul 2006 20:32 GMT

> Height should be 22px like the rest.

Thanks for the response, Jim. I had the .about class with a larger
height so that it would push the other divs down a bit to reveal a drop
shadow beneath the nav bar. Additional padding-bottom would have
probably been a better method, but due to IE issues, I finally just
gave up on it and removed it from the layout altogether.

> I am not clear why you have a separate class for every menu item. It
> seem quite unnecessary and, in this case, counterproductive. In fact,
> since you fix the width to a given number of pixels, the menu layout looks
> quite bad when the text size is increased.

I have a separate class for every menu item so that I can specify the
width of each menu item. I need to squeeze seven menu items into a
fixed layout and space them evenly. Writing a class for each menu item
achieves this goal. Is there a more effective way to achieve it?

By the way, the fixed-width layout was a client request, so changing
the layout to fluid was not an option.

Thanks for the input here, folks.

-Ray

Reply to this Message

Jim Moe - 28 Jul 2006 05:53 GMT

> By the way, the fixed-width layout was a client request, so changing
> the layout to fluid was not an option.

Your client wants the menu to look like crap when the font is enlarged?

Signature

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

Chris F.A. Johnson - 28 Jul 2006 15:02 GMT

>> By the way, the fixed-width layout was a client request, so changing
>> the layout to fluid was not an option.
>>
> Your client wants the menu to look like crap when the font is enlarged?

And unreadable when it is not (when viewed at a high resolution).

Signature

Reply to this Message

rfox@scoe.net - 29 Jul 2006 00:58 GMT

>Your client wants the menu to look like crap when the font is enlarged? <

>And unreadable when it is not (when viewed at a high resolution).

So what are you saying, that one should never use a fixed layout? Or
can you offer some useful advice on how to make a fixed layout more
accommodating to users who enlarge their text?

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2006

Divs Won't Sit On Same Line in IE