CSS Internet Explorer Help

LazyD · Aug 9, 2006

Hi All,

I just finished building my site, its purely HTML and CSS, except for the quote page, the form is tables....

Anyway, Ive been using Firefox as my standard browser all along... I finish, look at it etc. Displays great in Firefox, im thinking fantastic, im proud of myself...

And then I open it in IE and its atrocius...Things are really messed up, I dont even know where to start...Im really beaten down over this, I dont understand how 2 browsers could display such different things...

You can see the site here: http://www.lazydcreations.com

Link to HTML: http://www.lazydcreations.com/templates/simple/index.php
Link to CSS: http://www.lazydcreations.com/templates/simple/ld.css

Web-Viper · Aug 9, 2006

you need to remove the div tags my best advice to you is use a program such as dream weaver it will validate your code in all browsers. but this specific problem i have had before and it is the div tag that does it. hope this helps

LazyD · Aug 9, 2006

The div tag? The entire site is layed out using divs...If I remove the divs im back to square one, and I myswell just use tables at that point...

I dont mean to offend but I dont think "divs" are the problem...

CreedFeed · Aug 9, 2006

Couple of things first off...

You are using xhtml styled HTML tags in your document (including the closing slash like <br />) but your doc type is set for HTML 4.01 strict. You should change your doc type to XHTML.

In your HTML code you have:

Code:

<body>
<div class="container">
<div class="spotlight">
<P class="footer">

You don't have a closing </p> for that <p>

I think your main problem is in your CSS - the first thing you display is a floated right column spotlight. You set it's padding-top to 320px or whatever it was... You then display the header which is not floating. Unless you float the header left, it will abide by the padding space you set from the spotlight.

I would actually change up the layout of your page a bit - first display the header and navigation, then display the content - one column floating left with your main content and one floating right (your spotlight column).

Hope that helps.

LazyD · Aug 9, 2006

Creed, thanks for the response...However...

You said, I should display the header first, then nav and then content.... My navbar is above my header, shouldnt my nav be displayed first, or are you saying that I should display the header first then nav and reposition the nav relative to the header?

Also, if I float the content area left and the spotlight right then my containers and such dont push to the bottom of the page like they should with 100% height because they dont seem to recognize the content of the content area or spotlight...

saywhatf000 · Aug 9, 2006

Just use your site to teach the world that Internet Explorer is Crap.

LazyD · Aug 9, 2006

Dont worry, I already know IE is crap, however, trying to explain that fact to the general population that uses IE would be hard, it would also take up an entire website trying to explain to be people why it sucks....

In any case, I really need to get this fixed, and I dont know where to start...

xemiterx · Aug 9, 2006

This fixes it:

Change the css in the button div's, remove these for all 5

PHP:

position: relative;
left: xxxpx;
bottom: xxxpx;

and replace them with

PHP:

float: left;

Doing that makes the page look the same in IE and Firefox on my system.

LazyD · Aug 9, 2006

xemiterx said:
This fixes it:

Change the css in the button div's, remove these for all 5

PHP:

position: relative; left: xxxpx; bottom: xxxpx;

and replace them with

PHP:

float: left;

Doing that makes the page look the same in IE and Firefox on my system.

Ah, your brilliant, thank you everyone for your help and especially you xemiterx

CreedFeed · Aug 9, 2006

LazyD said:
Creed, thanks for the response...However...

You said, I should display the header first, then nav and then content.... My navbar is above my header, shouldnt my nav be displayed first, or are you saying that I should display the header first then nav and reposition the nav relative to the header?

Also, if I float the content area left and the spotlight right then my containers and such dont push to the bottom of the page like they should with 100% height because they dont seem to recognize the content of the content area or spotlight...

I know you already got the answer to your problem but just want to clarify my answer - yes I made a typo. I meant nav, then header, then content. Sorry about that.

And in IE the page doesn't have 100% height anways. It stops as soon as the footer is displayed. But if you meant floating both columns and then showing the footer below the floats... to make the footer appear below the floats you just need to clear the floats using "clear: both;"

CSS Internet Explorer Help

Established Member

Established Member

Established Member

Established Member

Established Member

Account Closed

Established Member

Established Member

Established Member

Established Member

Similar threads

We're social

Planial.com

scholarships.gr

HearingAidsForSale.com

DecentralizedAF.com

RPNJ.COM

ouverse.com

hypeup.xyz

KaiNFT.com

CrackerStore.com

cellular.gr

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling