472,958 Members | 2,022 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,958 software developers and data experts.

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
9 1513
drhowarddrfine
7,435 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
7,435 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
7,435 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
7,435 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
7,435 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

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

Similar topics

3
by: Jeremy Epstein | last post by:
I've got a 4-page form that lets users enter a whole lot of information, which is then submitted and emailed at the end. All the fields are stored as session data. The whole thing works fine: ...
6
by: Geoff | last post by:
When trying to focus a field in Firefox, I get the following error: Error: " nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame ::...
87
by: expertware | last post by:
Dear friends, My name is Pamela, I know little about CSS, but I would like to ask a question I have an image on a web page within a css layer: <DIV ID=MyLayer STYLE = "position:...
14
by: expertware | last post by:
Ok! to avoid confusion I will start a new argument. Thanks!! FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT ===============================================================...
5
by: SPE - Stani's Python Editor | last post by:
Hi, During optimizing SPE for Ubuntu, I found something strange. I have Ubuntu 5.10 "The Breezy Badger" and unfortunately this code is not working: >>> import webbrowser >>>...
7
by: Coder | last post by:
Hi I have the following code in java script, it is not giving proper output in FIREFOX but running fine in IE... can anybody help me out to make this run in FIREFOX . <script...
12
by: amit | last post by:
Hello group, I'm kinda skeptical about a code is being used in my js program. All it does is checking what browser is being run and finds out if FLASH is installed or not. This code works...
6
by: scotty | last post by:
I have a script that loops through an existing table list and prepares each href element node to trigger a function when an image is clicked. The function that will be run passes a property value...
7
by: Carlos Mendonça | last post by:
Has anyone managed to get ClickOnce to work with Firefox? It seems to me that it still has the same issues VS 2K5 had. I appreciate any comments or tips.
3
by: SAL | last post by:
Hello, I did google this issue and found some stuff related to BrowserCaps section of either web.config or machine.config but it didn't work. It seems that most pages in my webapp are okay but a...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
3
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
2
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.