/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] CSS Float and IE

Copy linkTweet thisAlerts:
Jul 08.2007

I have a site that I am creating. I am floating the body of the pages next to the navigation. In Firefox it looks great but IE has to go and ruin it. Can someone please help me fix this. I know how to fix most of the IE bugs with hacks but I have never had to fix the float before. You can view a few pages here:

[url]http://www.officialmponline.com/paulstest/index.html[/url]

Not all the links work and the drop down menu does not work properly on these pages and have been fixed. I just need help with the float.

I would appreciate any help.

Thanks in advance.

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@kfranzdevJul 08.2007 — your left navigation is also buggy in firefox - if you hover over the right side of the "home" link, the word "home" disappears (or the word turns green and therefore blends with the rollover background color).

the reason why the body of your page is pushed all the way down on the page is because it doesn't fit in the space you set for it. this is the box model problem in IE.
Copy linkTweet thisAlerts:
@macthewebJul 08.2007 — I didn't check closely to see if your content was wider than the containing div. Assuming you did the arithmetic right IE also has problems with floats

One: don't float the left column.

make your navigation absolutely positioned. With no floats you avoid IE float bugs.

#wrapper {position: relative}

#nav {position: absolute; left: 0; top: 120px; width: 125px;}

#body3 {margin-left: 125px;}

Two: use the Holly hack. Read the details to find out how it works but the short answer is give the containing element an explicit size:

#wrapper {height: 1%;}

On another note your flyout navigation isn't working in Firefox.
Copy linkTweet thisAlerts:
@monarch_684authorJul 08.2007 — The navigation has been fixed, just not on the pages that I uploaded.
Copy linkTweet thisAlerts:
@monarch_684authorJul 08.2007 — Never mind I will just use margins. It is easier to me to fix the bugs in IE with this rather than floats.
Copy linkTweet thisAlerts:
@WebJoelJul 08.2007 — <p><img src="images/animated/thankyou.gif" alt="Thank You" width="326[B]px[/B]" /></p>[/QUOTE]

"px" use is invalid in HTML. "px" is CSS.

Either remove the "px" from any instance where it is used in HTML, or add the inline style:

<p><img src="images/animated/thankyou.gif" alt="Thank You" [B]style="width:326px"[/B] /></p>
Copy linkTweet thisAlerts:
@monarch_684authorJul 08.2007 — It validates.
Copy linkTweet thisAlerts:
@macthewebJul 09.2007 — It might validate in the automated checker, but it shouldn't.
×

Success!

Help @monarch_684 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...