Divs Won't Sit On Same Line in IE

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

rfox (AT) scoe (DOT) net wrote:

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?

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.

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

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

On 2006-07-26, rfox (AT) scoe (DOT) net wrote:

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.

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>


--
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

rfox (AT) scoe (DOT) net wrote:

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.

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

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

rfox (AT) scoe (DOT) net wrote:

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?

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

On 2006-07-28, Jim Moe wrote:

rfox (AT) scoe (DOT) net wrote:

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).

--
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

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?