The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Inline object drops down in IE6 and IE& ... HELP!
abruzzopat
post Jan 12 2011, 05:17 PM
Post #1





Group: Members
Posts: 5
Joined: 12-January 11
Member No.: 13,582
I would really appreciate any help on this issue. I have a header DIV working fine in IE8, Chrome and Firefox, but in IE6 and IE7 it behaves differently and nothing I have tried helps.

I suspect I am not the only one with this issue, and there must be a fix, but I have tried searching the forum and any related topics don't seem to help.

Here's the site: http://www.belloabruzzo.com/sandbox/sandbox.html

Here is the issue: In Chrome, IE8 and Firefox, the logo and the menu appear side-by-side (this is what I want), but in IE7 and IE7, the menu drops down below the logo.

I have tried "display:inline" and some other tweaks with no success. If someone knows about this issue and the correct fix, I would be very grateful!

-pat

PS: Here's the actual HTML/CSS

<html>
<head>
<STYLE type="text/css">
#header {width:900px; text-align:left; background:cornsilk; }
ul.menu {width:80px; text-align:left; float:right; border:2px solid black; }
body {background:gray; }
</STYLE>
</head>
<div id="header">
<a href="index.html"><img src="logo.jpg" alt="missing" border="0"/></a>
<ul class=menu>
<li>Choice 1</li>
<li>Choice 2</li>
<li>Choice 3</li>
<li>Choice 4</li>
<li>Choice 5</li>
</ul>
</div>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 13 2011, 12:28 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Your page has no doctype declaration, which throws browsers into quirks mode. See also:
http://hsivonen.iki.fi/doctype/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
abruzzopat
post Jan 13 2011, 09:09 AM
Post #3





Group: Members
Posts: 5
Joined: 12-January 11
Member No.: 13,582
Thanks for the response Darin.

Unfortunately that's not the cause of the problem. What I posted was just a stripped down version of my web page which does have doctype declared. I added it to the sandbox version anyway, and ran it through http://validator.w3.org, and it's clean.

Any other suggestions?

-pat
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 13 2011, 10:01 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Float drops are always because there isn't room enough for the float. So make some more room.

FYI the float drops not only in IE6 but also in the gecko version I happened to try first. When I tried a newer FF it stayed put.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
abruzzopat
post Jan 13 2011, 10:38 AM
Post #5





Group: Members
Posts: 5
Joined: 12-January 11
Member No.: 13,582
Thanks Pandy.

Pretty sure that's not the problem either as my DIV is 900px wide, and the two elements (logo and menu) are less than 400px together, so there's plenty of room. And it works fine (with lots of space between elements) in IE8, Chrome and Firefox.

It's something specific to early IE which drops this float no matter how much space there is to the right of the element it comes after.

Here's the example: http://www.belloabruzzo.com/sandbox/sandbox.html

Thanks again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 13 2011, 10:42 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
If there was enough room the float wouldn't drop. Have you taken all margins, padding and borders into account?

IE also has bugs related to floats that among other things in some situations make it add extra margin to a float.

QUOTE
It's something specific to early IE which drops this float


That may very well be, but it doesn't explain why it drops in my gecko.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
abruzzopat
post Jan 13 2011, 10:50 AM
Post #7





Group: Members
Posts: 5
Joined: 12-January 11
Member No.: 13,582
Hi Pandy. Did you have a chance to look at the HTML/CSS? It's ultra simplified with no padding or margins. Just for grins I removed the only border, and it still drops.

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
#header {width:900px; text-align:left; background:cornsilk; }
ul.menu {width:80px; text-align:left; float:right;}
body {background:gray; }
img {border: 0px none; }
</style>
</head>

<div id="header">
<a href="index.html"><img src="logo.jpg" alt="missing"></a>
<ul class=menu>
<li>Choice 1</li>
<li>Choice 2</li>
<li>Choice 3</li>
<li>Choice 4</li>
<li>Choice 5</li>
</ul>
</div>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 13 2011, 10:53 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Oops! I hadn't looked at the HTML. You are right, there really isn't much there.

If you put the list before the image in the source it will fix your problem. Alternatively you can float the link left. FF must have changed behavior with this recently. A little odd, must check on that. Anyway, IE is not the only browser that do it the way it does.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
abruzzopat
post Jan 13 2011, 12:13 PM
Post #9





Group: Members
Posts: 5
Joined: 12-January 11
Member No.: 13,582
Pandy said: "If you put the list before the image in the source it will fix your problem."

Interesting... you're right. It never occurred to me to do that. Seems odd.

Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 13 2011, 02:48 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Well, that's the way it used to work and I thought it still did, so thank YOU. smile.gif

It used to be that a float moved as far out as it could from the position it would have been at had it not been floated. Since UL is a block level element, that would be below the image. I faintly recall, after lots of brooding, that maybe it turned out this wasn't the correct behavior and browser behavior started to change, but I'm not sure. That part of the spec is somewhat esoteric. Have to read it again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 03:33 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC