Raaargh!... pixel perfection?

[(Shovel)]

Right, I'm trying to get a nice CSS Layout set up, where we have a logo in the top left (this is fine), then a bodytext <div> on the right hand side, with a menu level with the bodytext on the left. .. to a degree very much like an old table column layout would do.

Due to Microsoft not supporting "position: fixed", I'm doing this with absolutely position boxes, and I'm having some browser compatibility related "fun" getting it to line up. Here's the style sheet:

	 #menu {
	 			position: absolute;
				top: 250px;
				left: 5px;
				right: 20%;
				
				width: 20%;
				height: auto;

				color: #FFF;
				
				padding: 0px;
				margin: 0px;
	 }
	 
	 #menu p:first-line {
				 font-weight: 700;
	 }
	 
	 #menu p {
				clear: both;
				
				background-color: #06C;
  		  background-image: url("../img/arrow.gif");
				background-repeat: no-repeat;
				border: 3px solid #FFF;

				padding-left: 30px;
				
	 }	 
	 
	 #body {
  	 			 position: absolute;
					 top:250px;
					 left: 25%;
					 right: 5px;
					 bottom: 50px;
					 
					 height: auto;
					 width: 70%;
					 
					 background-color: #06c;
					 border:3px solid #FFF;
					 
					 color: #FFF;
	 }

Using the HTML-Kit preview (which renders in IE) the top first

aragraph of the menu lines up with the top of the body division. However, Mozilla has a small gap between the top of the box and the top of the paragraph. It means the borders of the first menu don't align with the top of the border of the body.

Erm... stuck!

The other thing I note, is that while Mozilla will be very well behaved and render the entire body region if I tell it to, IE will only render the area filled by text

Also tested it in Opera, and the borders do line up.

I can guess that it's a problem that Mozilla puts a gap before a paragraph that IE/Opera doesn't. I've played with valign and margin and padding and none of them can persuade it to line up. Is there an answer?

Thanks very much

 

[Jonty]

Hi Ben

Do you have a sample page we could look at? A page with both the HTML elements and the CSS code? This would make it much easier (with no disresepect to your accurate and detailed description ) to resove any problems. There is usually an answer to all such problems, but sadly it's not always apparent on first glance

Kind Regards

 

[(Shovel)]

There is now

There's a concept mock up at http://signs.studentssocial.co.uk - erm, the picture of me with the guitar is just a place holder... it has nothing to do with the band the site is for...

Thanks

 

[Jonty]

Hi Ben

The following comes purely from experience, so don't worry if it seems at odds with the CSS specification, or doesn't make much sense in general Anyway, the problem arises as some browsers give certain elements default styles which will be applied unless overridden (e.g. <h1></h1> will, by default, be a large font and emboldened). In a similar manner, some browsers give

</p> elements a default margin. The trick is knowing which browsers give which elements default styles

Anyway, in this instance, IE and Opera don't do anything particularly special with

</p> elements, but Mozilla provides them with a default margin. On your page, this default margin thus creates the misalignment between the elements. Here's how to fix it.

1. Find the following markup code . . .
   

   <div id="menu">
     
   
   Junction #1

2. As we need to target this
   
   </p> element alone, and not all such elements, add an appropriate id="" attribute (I'll use 'Top'); e.g. . .
   

   <div id="menu">
     <p id="Top">Junction #1

3. Now in your CSS file, simply add the following code to override the default
   
   </p> margin . . .
   

   P#Top
   {
     margin:0px;
   }

This should thus fix the problems you were encountering (N.B. Mozilla also places a margin above the 'Welcome to Signs!' content, which can be fixed in a similar manner (you could use a class if you're going to be removing margins on a lot of elements)).

As for the height issue, I'm not too sure which browser is in the right, as it's not too clear how the 'auto; property should function according the latest CSS3 spec. IE will render height, but I believe it prefers a fixed value or percentage. Not very helpful, I know

Hope this helps

Jonty

P.S. Thanks for making that mock-up page

 

[(Shovel)]

The mock up page was being worked on anyway, so it's no problem to publicise it a bit, embaressing photo or not.

Thanks very much for the tip, I did wonder if that's what was happening, but didn't know how to fix it. I'll attempt to implement using the "first-child" pseudo element, since that would be the slickest way to do it. Mozilla is most likely to support it, IE wont, but IE takes out the margin anyway. If it's not implement then manual class types will do

Thanks very much as ever Jonty.

EDIT:// "p:first-child {}" did the trick

 

[Jonty]

Your very welcome Nice solution, by the way. I tend to overlook 'first-child' method, since IE doesn't support it, but in this case it's the perfect solution

Kind Regards

 

[Testin da Cable]

um, just to be pointless.....most of the stuff I read about CSS layouts seem to stress that one shouldn't strive for pixel-perfect joins. sure, you can optimise/tweak/maim a page to death, but there will always be someone who loses out

 

[Jonty]

Originally posted by Testin da Cable
um, just to be pointless.....most of the stuff I read about CSS layouts seem to stress that one shouldn't strive for pixel-perfect joins. sure, you can optimise/tweak/maim a page to death, but there will always be someone who loses out

I suppose it really depends on how you design. It used to be the case that browsers such as Netscape 4 couldn't really handle per-pixel layouts, and that CSS itself wasn't powerful enough to really allow designers to show off.

However, things have come a long way since then and it's now perfectly acceptable to construct pe- pixel layouts using CSS, which are often constructed in such a way that browsers not capable of rendering the design possible are left with a text-only page to view. I jokingly label this 'incentive designing', as only those with a standards compliant browser will get the best browsing experience, hence creating an incentive for those with now antiquated browsers to upgrade

Kind Regards

 

[1tchy trigger]

Netscape 4x = teh win!

 

[Jonty]

Originally posted by 1tchy trigger
Netscape 4x = teh win!

lol Scott Andrew's Netscape 4 Birthday Page sums things up nicely

Kind Regards

 

[Testin da Cable]

lol