CSS on Firefox

m4ttyh2007

Recently, I've been working on my coursework for college, and we have to make portfolio's and an website as part of this. I made both of these and they worked perfectly in Internet Explorer 7. The real problem occurs when i open it up in Firefox. Much of the content which i've put in is displaced alot with all the areas ive made into div-tags etc.

My HTML Code is for my 'website' home page is:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>[SciFiBuy] - Home</title>

<link href="CSS/CSS.css" rel="stylesheet" type="text/css" />

</head>
 
<body>

<div class="Header">

  <p align="left"><img src="Images/Jericho=Style2.gif" width="96" height="96" /></p>

</div>

<div class="Navigation">

  <p><a href="Index.htm">Home</a><a href="TVSeries.html">TV Series</a><a href="Films.html">Films</a><a href="SpecialOffers.html">Special Offers</a><a href="ContactUs.html">Contact Us</a><a href="SiteMap.html">Site Map</a><a href="OrderForm.html">Order Form</a></p>

</div>

<div class="Content">

  <p>Welcome to SciFiBuy </p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

</div>

<div class="Footer">

  <p>Footer </p>

</div>

</body>

</html>

And my CSS is:

Expand|Select|Wrap|Line Numbers

 
@charset "utf-8";

body {

    background-color: #000033;

}

.Header {

    color: #000000;

    font-size: 50px;

    font-weight: bolder;

    font-style: italic;

    border: thin double #FFFFFF;

    text-align: center;

    width: 1021px;

    background-color: #0099FF;

    position: absolute;

    left: 7px;

    top: 7px;

    height: 99px;

    background-image: url(../Images/Header.gif);

    background-repeat: no-repeat;

    vertical-align: middle;

    padding-top: 3px;

    padding-left: 3px;

}

.Navigation {

    color: #FFFFFF;

    position: absolute;

    top: 113px;

    left: 4px;

    width: 1000px;

    text-align: center;

    background-image: url(../Images/nav.gif);

    background-repeat: no-repeat;

    background-position: center;

}

.Navigation a {

    display: inline-block;

    margin: 3px;

    padding: 3px;

    text-align: center;

    border: thin solid #FFFFFF;

    font-weight: bolder;

    color: #000000;

    text-decoration: none;

}
 
.Footer {

    color: #FFFFFF;

    position: absolute;

    left: 15px;

    top: 475px;

}

.Content {

    color: #000000;

    position: absolute;

    left: 4px;

    top: 145px;

    border: thin solid #FFFFFF;

    margin: 3px;

    padding: 3px;

    width: 1018px;

    height: 486px;

    background-color: #0099FF;

    font-weight: bold;

}

Anyone know of why this may be occuring and what i can do to fix this?

Regards
Matty H.

drhowarddrfine

IE7 is 10 years behind web standards or mis-implemented. Did you design in IE7 first? Never use IE as a reference. Always use a modern browser like Firefox, Opera or Safari to initially test your site. Then we can adjust for IEs quirks and bugs.

I'll look at this shortly.

drhowarddrfine

You are absolutely positioning Navigation and Content. Doing so removes those elements from the normal flow which is causing them to rise up to the next positioned element. Firefox is performing correctly while IE is not, as usual.

I don't have time to look any more right now but I didn't see exactly why you need abs pos to do what you are doing.

While you are adjusting things, use Firefox to test first. Then see what IE does. The hacks to fix IE are known.

m4ttyh2007

So, i should design my website around firefox initially... so it good in that first?

Also, i used absolute because we were told to. I was aware there were three other options but i was not aware of what each does.

Also, what are these 'hacks' you speak off? Which fix it for internet explorer?

~Regards
Matty

drhowarddrfine

So, i should design my website around firefox initially... so it good in that first?

Exactly. Firefox is more standards compliant and most likely to show what you actually wrote. IE tends to make things up on its own.

Also, i used absolute because we were told to.

That's fine, but you need to remember that they are removed from the flow and 'free float' around the page, constrained only by the nearest positioned element. If you surround an abs pos element with a relatively positioined one, it will follow that element around as its 'center of the universe' so to speak.

what are these 'hacks' you speak off? Which fix it for internet explorer?

There are hundreds of web sites dedicated to fixing IE but a few are more notable.

One of the best lists of IE hacks
For what works and doesn't in browsers
More IE bugs and their fixes

m4ttyh2007

Cheers for all, just one thing left im confused with whichw as the positioning.

Im not too much of an expert in CSS so i didn't quite understand what you were saying about the positioning types (absolute, relative etc)

Regards
~Matty

drhowarddrfine

Look them up at W3Schools.com.

Sorry, very sick today.

m4ttyh2007

I redesigned my website so it looked perfect in Firefox, but now how do i go about actually correcting the errors which now appear in Internet Explorer.

drhowarddrfine

Link or the complete markup.

m4ttyh2007

HTML:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::[ Index ]::</title>
<link href="css/CSS.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="Header">
<p> </p>
</div>
<div class="Navigation">
<p><a href="Index.html">Home</a> <a href="Pages/TVSeries.html">TV Series</a> <a href="Pages/Films.html">Films</a> <a href="Pages/OrderForm.html">Order Form</a> <a href="Pages/SpecialOffers.html">Special Offers</a> <a href="Pages/ContactUs.html">Contact Us</a> <a href="Pages/SiteMap.html">Site Map</a></p>
</div>
<div class="Content">
<p>Content</p>
</div>
<div class="Logo"></div>
</body>
</html>
[/html]

CSS:

Expand|Select|Wrap|Line Numbers

 
@charset "utf-8";

body {

background-color : #000033;

color : #ffffff;

font-weight : bolder;

}

.Header {

    background-image : url(../images/Header.gif);

    position : absolute;

    width : 1024px;

    height : 102px;

    border : thin solid #ffffff;

    left : 10px;

    top : 10px;

}

.Logo {

    position : absolute;

    left : 14px;

    top : 14px;

    height : 96px;

    width : 96px;

    background-image : url(../images/Jericho=Style2.gif);

    overflow: visible;

    z-index: auto;

}

.Navigation {

    position : absolute;

    left : 10px;

    top : 106px;

    width : 1024px;

    text-align : center;

}

.Navigation a {

display : inline;

position : relative;

width : 125px;

margin : 3px;

padding : 3px;

text-decoration : none;

background-color : #0099ff;

color : #000000;

text-align : right;

border : thin solid #ffffff;

}

.Content {

position : absolute;

left : 10px;

top : 145px;

width : 1024px;

border : thin solid #ffffff;

}

CSS on Firefox

Post your reply

Similar topics