467,907 Members | 1,405 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,907 developers. It's quick & easy.

CSS on Firefox

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>[SciFiBuy] - Home</title>
  6. <link href="CSS/CSS.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div class="Header">
  11.   <p align="left"><img src="Images/Jericho=Style2.gif" width="96" height="96" /></p>
  12. </div>
  13. <div class="Navigation">
  14.   <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>
  15. </div>
  16. <div class="Content">
  17.   <p>Welcome to SciFiBuy </p>
  18.   <p>&nbsp;</p>
  19.   <p>&nbsp;</p>
  20. </div>
  21. <div class="Footer">
  22.   <p>Footer </p>
  23. </div>
  24. </body>
  25. </html>
  26.  
And my CSS is:
Expand|Select|Wrap|Line Numbers
  1. @charset "utf-8";
  2. body {
  3.     background-color: #000033;
  4. }
  5. .Header {
  6.     color: #000000;
  7.     font-size: 50px;
  8.     font-weight: bolder;
  9.     font-style: italic;
  10.     border: thin double #FFFFFF;
  11.     text-align: center;
  12.     width: 1021px;
  13.     background-color: #0099FF;
  14.     position: absolute;
  15.     left: 7px;
  16.     top: 7px;
  17.     height: 99px;
  18.     background-image: url(../Images/Header.gif);
  19.     background-repeat: no-repeat;
  20.     vertical-align: middle;
  21.     padding-top: 3px;
  22.     padding-left: 3px;
  23. }
  24. .Navigation {
  25.     color: #FFFFFF;
  26.     position: absolute;
  27.     top: 113px;
  28.     left: 4px;
  29.     width: 1000px;
  30.     text-align: center;
  31.     background-image: url(../Images/nav.gif);
  32.     background-repeat: no-repeat;
  33.     background-position: center;
  34. }
  35. .Navigation a {
  36.     display: inline-block;
  37.     margin: 3px;
  38.     padding: 3px;
  39.     text-align: center;
  40.     border: thin solid #FFFFFF;
  41.     font-weight: bolder;
  42.     color: #000000;
  43.     text-decoration: none;
  44. }
  45.  
  46. .Footer {
  47.     color: #FFFFFF;
  48.     position: absolute;
  49.     left: 15px;
  50.     top: 475px;
  51. }
  52. .Content {
  53.     color: #000000;
  54.     position: absolute;
  55.     left: 4px;
  56.     top: 145px;
  57.     border: thin solid #FFFFFF;
  58.     margin: 3px;
  59.     padding: 3px;
  60.     width: 1018px;
  61.     height: 486px;
  62.     background-color: #0099FF;
  63.     font-weight: bold;
  64. }
  65.  
Anyone know of why this may be occuring and what i can do to fix this?

Regards
Matty H.
Jan 4 '08 #1
  • viewed: 1331
Share:
9 Replies
drhowarddrfine
Expert 4TB
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.
Jan 4 '08 #2
drhowarddrfine
Expert 4TB
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.
Jan 4 '08 #3
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
Jan 4 '08 #4
drhowarddrfine
Expert 4TB
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
Jan 5 '08 #5
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
Jan 5 '08 #6
drhowarddrfine
Expert 4TB
Look them up at W3Schools.com.

Sorry, very sick today.
Jan 5 '08 #7
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.
Jan 7 '08 #8
drhowarddrfine
Expert 4TB
Link or the complete markup.
Jan 7 '08 #9
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>&nbsp;</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
  1. @charset "utf-8";
  2. body {
  3. background-color : #000033;
  4. color : #ffffff;
  5. font-weight : bolder;
  6. }
  7. .Header {
  8.     background-image : url(../images/Header.gif);
  9.     position : absolute;
  10.     width : 1024px;
  11.     height : 102px;
  12.     border : thin solid #ffffff;
  13.     left : 10px;
  14.     top : 10px;
  15. }
  16. .Logo {
  17.     position : absolute;
  18.     left : 14px;
  19.     top : 14px;
  20.     height : 96px;
  21.     width : 96px;
  22.     background-image : url(../images/Jericho=Style2.gif);
  23.     overflow: visible;
  24.     z-index: auto;
  25. }
  26. .Navigation {
  27.     position : absolute;
  28.     left : 10px;
  29.     top : 106px;
  30.     width : 1024px;
  31.     text-align : center;
  32. }
  33. .Navigation a {
  34. display : inline;
  35. position : relative;
  36. width : 125px;
  37. margin : 3px;
  38. padding : 3px;
  39. text-decoration : none;
  40. background-color : #0099ff;
  41. color : #000000;
  42. text-align : right;
  43. border : thin solid #ffffff;
  44. }
  45. .Content {
  46. position : absolute;
  47. left : 10px;
  48. top : 145px;
  49. width : 1024px;
  50. border : thin solid #ffffff;
  51. }
  52.  
  53.  
Jan 7 '08 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Jeremy Epstein | last post: by
6 posts views Thread by Geoff | last post: by
87 posts views Thread by expertware | last post: by
5 posts views Thread by SPE - Stani's Python Editor | last post: by
7 posts views Thread by Coder | last post: by
12 posts views Thread by amit | last post: by
6 posts views Thread by scotty | last post: by
7 posts views Thread by Carlos Mendonça | last post: by
3 posts views Thread by SAL | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.