473,324 Members | 2,313 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

FF causing problems that IE doesnt have! CSS

RedSon
5,000 Expert 4TB
Here is the site if you want to look at it http://malk0lm.110mb.com. What I am trying to figure out is how to get the navbar to render properly in both IE and FF. If you look at it in IE there is no additional dark line at the bottom of the toolbar. Also with IE the nav bar covers 100% of the width where in FF it covers more then 100% because you cant see the right side end cap graphic.

Here is the markup:

Expand|Select|Wrap|Line Numbers
  1. <div id="masthead"> 
  2.     <h1 id="siteName">Dear James</h1>
  3.   <div id="globalNav"><img src="protected/img/gblnav_left.gif" alt="" name="gnl" width="5" height="32" id="gnl" /> <img alt="" src="protected/img/glbnav_right.gif" height="32" width="5" id="gnr" />
  4.     <a href="http://malk0lm.110mb.com/" class="glink" >Home</a><a href="#" class="glink">None</a></div>
  5. </div>
  6. <!-- end masthead -->
The CSS:

Expand|Select|Wrap|Line Numbers
  1. #globalNav img{
  2.     display: block;
  3.     margin-bottom: 0px;
  4.     z-index: 2;
  5. }
  6.  
  7. #globalNav a {
  8.     font-size: 90%;
  9. }
  10.  
  11. a.glink, a.glink:visited{
  12.       font-size: small;
  13.       color: #000000;
  14.     font-weight: bold;
  15.     margin: 0px;
  16.     padding: 2px 5px 4px 5px;
  17.     border-right: 1px solid #8FB8BC;
  18. }
  19.  
  20. a.glink:hover{
  21.       background-image: url(img/glblnav_selected.gif);
  22.     text-decoration: none;
  23. }
  24.  
  25. #gnl {
  26.     position: absolute;
  27.     top: 0px;
  28.     left:0px;
  29. }
  30.  
  31. #gnr {
  32.     position: absolute;
  33.     top: 0px;
  34.     right:0px;
  35. }
  36.  
  37. #globalNav{
  38.     color: #cccccc;
  39.     padding: 6px 6px 0px 6px;
  40.     white-space: nowrap;
  41.     position: relative;
  42.     width: 100%;
  43.     min-width: 640px;
  44.     height: 32px;
  45.     color: #cccccc;
  46.     background-image: url(img/glbnav_background.gif);
  47. }
  48.  
  49. #masthead{
  50.     margin: 0;
  51.     padding: 10px 0px 10px 0px;
  52.     border-bottom: 1px solid #cccccc;
  53.     width: 100%;
  54. }
  55.  
Aug 20 '07 #1
6 1671
phvfl
173 Expert 100+
Hi,

The issue here is the differences in the box model betweeen IE and Firefox. In IE the padding is included in the width and height, in IE it is not.

Essentially you need to remove the padding or height in Firefox but not in IE. While there are many CSS hacks around to do this, although the star hack does not work in IE7, IMHO a better way to do it is to use conditional comments.

At the start of the body insert to code:
[HTML]
<!--[if IE]><div id="IERoot"><![endif]-->
[/HTML]

and immediately before the closing body tag put
[HTML]
<!--[if IE]><div id="IERoot"><![endif]-->
[/HTML]

The content of the conditional comment is only read in IE so IE has a div tag with an ID of IERoot whereas other browsers do not. For more info on conditional comments look at http://msdn2.microsoft.com/en-us/library/ms537512.aspx

You can then use CSS selectors that hook into the #IERoot to specify IE specific styles. In this case change the width and height of the #globalNav statement to auto:
Expand|Select|Wrap|Line Numbers
  1. #globalNav{
  2.     color: #cccccc;
  3.     padding: 6px 6px 0px 6px;
  4.     white-space: nowrap;
  5.     position: relative;
  6.     width: auto;
  7.     min-width: 640px;
  8.     height:auto;
  9.     color: #cccccc;
  10.     background-image: url(/img/glbnav_background.gif);
  11. }
  12.  
and then the IE specific code:

Expand|Select|Wrap|Line Numbers
  1. #IERoot #globalNav{
  2.   height:32px;
  3. }
  4.  
immediately after. I have tested this in IE6 as well and it displays correctly.

As much as I would love to claim credit for the IERoot idea I learnt it here

PS. Don't know if you noticed but in IE it states "This site best viewed with Firefox with Google Toolbar " although the problem was with Firefox :) Just though it was amusing.
Aug 20 '07 #2
RedSon
5,000 Expert 4TB
Hi,

The issue here is the differences in the box model betweeen IE and Firefox. In IE the padding is included in the width and height, in IE it is not.

Essentially you need to remove the padding or height in Firefox but not in IE. While there are many CSS hacks around to do this, although the star hack does not work in IE7, IMHO a better way to do it is to use conditional comments.

At the start of the body insert to code:
[HTML]
<!--[if IE]><div id="IERoot"><![endif]-->
[/HTML]

and immediately before the closing body tag put
[HTML]
<!--[if IE]><div id="IERoot"><![endif]-->
[/HTML]

The content of the conditional comment is only read in IE so IE has a div tag with an ID of IERoot whereas other browsers do not. For more info on conditional comments look at http://msdn2.microsoft.com/en-us/library/ms537512.aspx

You can then use CSS selectors that hook into the #IERoot to specify IE specific styles. In this case change the width and height of the #globalNav statement to auto:
Expand|Select|Wrap|Line Numbers
  1. #globalNav{
  2.     color: #cccccc;
  3.     padding: 6px 6px 0px 6px;
  4.     white-space: nowrap;
  5.     position: relative;
  6.     width: auto;
  7.     min-width: 640px;
  8.     height:auto;
  9.     color: #cccccc;
  10.     background-image: url(/img/glbnav_background.gif);
  11. }
  12.  
and then the IE specific code:

Expand|Select|Wrap|Line Numbers
  1. #IERoot #globalNav{
  2.   height:32px;
  3. }
  4.  
immediately after. I have tested this in IE6 as well and it displays correctly.

As much as I would love to claim credit for the IERoot idea I learnt it here

PS. Don't know if you noticed but in IE it states "This site best viewed with Firefox with Google Toolbar " although the problem was with Firefox :) Just though it was amusing.
Great that worked with the height of the toolbar but how do I solve the width issue? The right nav bar cap does not display on FF without the hscrollbar, what do I do to correct that?

Is the solution similar to the height issue?
Aug 20 '07 #3
phvfl
173 Expert 100+
The width is still explicitly stated:
Expand|Select|Wrap|Line Numbers
  1. width:100%;
  2.  
Changing this to
Expand|Select|Wrap|Line Numbers
  1. width:auto;
  2.  
within the #globalNav selector solved the issue in the three browsers that I checked with:IE6, IE7, FF2

PS:if you need to explicitly state the width for some reason then you would need to do similar to with the height although as this is a percentage this may not scale well
Aug 20 '07 #4
drhowarddrfine
7,435 Expert 4TB
Well, the biggest problem you are having is that IE is in quirks mode because you aren't using a proper doctype. This totally messes up IE in the box model. As usual, FF is performing correctly while IE screws everything up with its broken box model.

See the article about doctypes under Articles above. Then validate your html for the list of 19 html errors you have.

Never, ever use IE as your reference for correct behavior. It will shoot you in the foot every time. IE7 is nine year behind web standards.

EDIT: After reading the post above, what he is doing is fixing IEs broken mode. This need not be done with the proper doctype but, essentially, he's doing the same thing by altering the margin/padding. However, this may cause problems later as the broken IE model will still persist.
Aug 20 '07 #5
RedSon
5,000 Expert 4TB
Well, the biggest problem you are having is that IE is in quirks mode because you aren't using a proper doctype. This totally messes up IE in the box model. As usual, FF is performing correctly while IE screws everything up with its broken box model.

See the article about doctypes under Articles above. Then validate your html for the list of 19 html errors you have.

Never, ever use IE as your reference for correct behavior. It will shoot you in the foot every time. IE7 is nine year behind web standards.

EDIT: After reading the post above, what he is doing is fixing IEs broken mode. This need not be done with the proper doctype but, essentially, he's doing the same thing by altering the margin/padding. However, this may cause problems later as the broken IE model will still persist.
Changing the doctype made IE behave like FF did so I went ahead and removed the fix that was described below. Now I am working through the validation errors but they dont make any sense.
Aug 20 '07 #6
drhowarddrfine
7,435 Expert 4TB
Some of the errors are caused by you using a Xhtml end tag, the '/>'. Remove the slashes.

(I'm working through this until I get called away)
Aug 20 '07 #7

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

Similar topics

4
by: Maurice | last post by:
Hi there, I'm experiencing big memory problems on my webserver. First on an old RedHat 7.2 system, now on an other fresh installed Suse 8.2 system: Linux version 2.4.20-4GB...
2
by: RK | last post by:
Hi I am using the following code in the button_click event in xxxxx.htm page which is URL for the showModalDialog window. function btnAddComment_Onclick() { var user_info = new...
14
by: Abhi | last post by:
FYI: This message is for the benefit of MS Access Community. I found that this prblem has been encounterd by many but there is hardly any place where a complete solution is posted. So I thought...
10
by: BBFrost | last post by:
We just recently moved one of our major c# apps from VS Net 2002 to VS Net 2003. At first things were looking ok, now problems are starting to appear. So far ... (1) ...
2
by: Rob Meade | last post by:
Hi all, We have recently adopted to using .net for our web applications which were previously written in vanilla ASP. Things have been going ok until recently, or at least its only recently...
3
by: sefe dery | last post by:
hi ng, i try to create a asp.net 1.0 website on windows server 2003(Servername: ServerX) with iis 6.0. PROBLEM: The user should login with his windows credentials in basic.aspx and...
5
by: Karthik Vazhkudai | last post by:
I have a class defined in VC.NET with the following code: namespace AlertSystem { public __value class CFilterRegion { public: System::Int16 X1; System::Int16 Y1; System::Int16 X2;...
2
by: DCC700 | last post by:
VS 2005 Converted Header causing error when publishing After converting from Visual Studio 2003 to 2005, I have had several issues with a header that is used throughout the project. The...
3
by: Wilson | last post by:
i am very new to c++ and am creating a new program, below are two seperate parts of the program, made to run seperately, however the constructor in one works (prints "constructing" on the screen),...
8
by: =?Utf-8?B?U3JpZGhhcg==?= | last post by:
Hi, I am having problems to run asp.net 1.1 on windows vista business operating system. When I try to create a new web application or try accessing an existing web application it is giving the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.