By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,159 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > html / css > questions > css on firefox
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

CSS on Firefox

P: 8
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
Share this Question
Share on Google+
9 Replies
drhowarddrfine
Expert 5K+
P: 7,435
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 5K+
P: 7,435
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
P: 8
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 5K+
P: 7,435
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
P: 8
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 5K+
P: 7,435
Look them up at W3Schools.com.

Sorry, very sick today.
Jan 5 '08 #7
P: 8
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 5K+
P: 7,435
Link or the complete markup.
Jan 7 '08 #9
P: 8
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.

Question stats

  • viewed: 1250
  • replies: 9
  • date asked: Jan 4 '08
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | HTML / CSS Answers Sitemap | HTML / CSS Insights Sitemap

Follow us to get the Latest Bytes Updates