Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS - IE vs Firefox Problem 2

Status
Not open for further replies.
nevets2001uk

nevets2001uk

IS-IT--Management
Jun 26, 2002
609
GB
Hi.

I've been building a ASP.NET site for a while now and have got it working perfectly. It's designed to use CSS for the layout.

Until now I've forgotten to think about other browser (I'm used to internal apps with a signle browser specification). It displays fine on IE but comlpetely wrong in Netscape and Firefox.

I tried re-doing a section of code to see how it displayed in both, but I still have display problems. I can't really see from the code what I should change to make it work in both browsers. Below is an except of the .aspx page and the css file.

Can anyone explain how I should modify this to get it display the same in both browsers. I can then try to get the rest of the page to work as well.

Thanks in advance for any advice you can give me.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>Page Title</title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
    <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="[URL unfurl="true"]http://schemas.microsoft.com/intellisense/ie5"[/URL] name="vs_targetSchema">
    <link href="css/appearance.css" type="text/css" rel="stylesheet">
  </head>

  <body class="page">
  <form id="Form1" method="post" runat="server">
			
    <div class="main">
			
      <div class="header">
        <img alt="Logo" src="sjg/images/general/logo_c.gif">
      </div>
			
      <div class="variableimage">
        <img alt="Random Image Header" src="sjg/images/headers/image1-2.jpg">
      </div>
			
      <div class="menubar">
        <span class="item">HOME</span>
        <span class="item"><a href="about/index.aspx">ABOUT</a></span>
        <span class="item"><a href="blog/index.aspx">BLOG</a></span>
        <span class="item"><a href="gallery/index.aspx">GALLERY</a></span>
        <span class="item"><a href="motorsport/index.aspx">MOTORSPORT</a></span>
      </div>
				
    </div>
		
  </form>
  </body>
</html>

Code: 
.page {
	background : #777777; 
	font-family : Arial; 
	font-size : 12px;
	}
	
a:link 			{color : #26559B; text-decoration : none;}
a:visited		{color : #26559B; text-decoration : none;}		
a:hover		{color : #000000; text-decoration : none;}

/* MAIN PAGE AREA */
/* This is the div in which all page elements will sit and includes the white background area */

.main {
	position: absolute;
	width : 900px; 
	left: 50%;
  	margin-left: -450px;
	margin-top : 35px; 
	margin-bottom : 35px; 
	background : #FFFFFF;
	border : 1px solid #000000;
	}
	
.header {
	width : 100%;
	background : #000000;
	padding-top : 15px;
	padding-left : 15px;
	padding-bottom : 12px;
	}
	
.menubar {
	width : 100%;
	height : 31px;
	background : #979797;
	padding-top : 7px;
	font : 13px Arial;
	font-weight : bold;
	color : #FFFFFF;
	border-bottom : 1px solid #000000;
	border-top : 1px solid #000000;
	}
	
.menubar span.item 	{padding-left : 15px;}
.menubar a:link			{color : #000000;}
.menubar a:visited 		{color : #000000;}
.menubar a:hover 		{color : #DDDDDD;}

Steve G (MCP)
 
Sort by date Sort by votes
First thing, add a full and valid doctype. Then validate against that. Then come back.
 
Upvote 0 Downvote
Excuse my ignorance. I've never changed the doctype before. The above is the standard one that Visual Studio put in.

Any clues as to what I should use instead for a site like this?

Also how should I then validate it?


Steve G (MCP)
 
Upvote 0 Downvote
Thanks guys.

I've changed the doctype and validated it at the above site. There are two errors but they are related to the asp.net runat command in the form tag, so I guess that this is okay?

The two pages still display differently in firefox and ie though. In firefox the 100% header overlaps the 'main' div's border by what looks like about 15pixels. I can't understand why. There are a few other noticable differences as well such as a white 5px(ish) gap under the 'variableimage' div in IE but not in Firefox.

Any further advice?


Steve G (MCP)
 
Upvote 0 Downvote
Thanks Dan.

I think I'm getting somewhere now! The whitespace is now gone. Didn't realise IE picked up on it like that!

The remaining problem is that the margin at the top of the 'main' div looks different by quite a lot between the two browsers. And still Firefox has a large black overlap in the header div. It's 100% and should as I understand it fix within the 900px containing 'main' div.

Cheers,
Steve

Steve G (MCP)
 
Upvote 0 Downvote
Nope, #header is actually 100% + 15px of padding on the left side. So that would be the hanging over part. Since divs are block level elements that are 100% by default, omitting the width will give you excpected results.

Why on earth are you using absolute positioning for the #main div, when there is absolutely no need for it?
 
Upvote 0 Downvote
Thanks a lot. I'm starting to get there now. I've picked up some further problems but I'll try to solve them myself for now!

Cheers to the both of you.

Steve G (MCP)
 
Upvote 0 Downvote
Here's a few more pointers:

1. Do you really need to wrap your images in divs? Seems like overusing divs, if you only wrap one image in them. I cannot know why you need the divs because I can't see the pictures, but maybe there is a better way. This goes double for the second picture, where there is no special style defined to the wrapping div.

2. Your div.menubar and span.item would be much better served in a semantically correct ul and li tags. With a little help of descendancy selectors you could minimize your html and make it easier to read by the screen readers.
 
Upvote 0 Downvote
Thanks for the tips. I've implemented them where possible and I have a site that looks almost the same in firefox as it does in IE.

One difference I'm left with is this section which is part of a two column fixed with section in the middle of the page.

In IE when the margin of 5px is used for the contents (left) column it looks more like a div of 10px. In firefox it appears as expected at about 5px. If I remove the margin the content looks the same.

Any ideas what I should change here? I can't seem to get my head around this part!

Regards,
Steve

HTML

Code: 
<div class="contents">
  <h3>FEEDBACK</h3>
  <a href="contact.aspx">Contact</a>
</div>
<div class="mainpage">
  <div class="content">
    <p>Welcome Text</p>
  </div>
</div>

CSS

Code: 
.contents {
	float: left;
	margin-left : 5px;
	margin-top : 10px;
	padding: 5px;
	width : 120px;
	}

.contents h3 {
	margin:0px;
	padding:0px;
	margin-bottom : 10px;
	}
		
.mainpage {
	float: right;
	margin-top : 5px;
	padding-top:7px;
	padding-bottom : 12px;
	margin-right : 5px;
	width : 732px;
	}

.content {
	padding-left:15px;
	border-left: 1px solid #000000;
	height : 400px;
	}

Steve G (MCP)
 
Upvote 0 Downvote
You should be proud of yourself. You have surpassed the errors of your code and are now dealing with IE bugs. Read here what's happening.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
789
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
624
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
668
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
213
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top