CSS Bug-squishing

design

#1

This is my first foray into web design for a good long while, so I had to teach myself CSS and all sorts of fun stuff. It’s more or less done, but there are a few tweaks that need to be made before I can call it done. It looks perfect in Firefox, Camino, Opera, and Omniweb. It’s close in IE7, but of course IE6 is a bit wonky.

http://www.hidaridesu.com/

  1. First of all, the ship float in the upper left has a tendency to jump around, especially between different browsers. I used the technique in Eric Meyer’s boxpunch to place it and create the unbroken border effect. At first, different browsers were treating the margins differently, which made things messy. I finally managed to get it lined up properly in every browser, but now if the text is enlarged, the links in the navbar push the float over to the right. I may end up turning those links into images so that they can’t be resized anyhow, but if anyone knows how I might get it to better stay put regardless…

  2. For some reason, IE6 pushes the right-hand float (the album image) about 25 pixels to the right, and the navbar div mysteriously follows suit. That image was a huge pain in the ass to get right in all the browsers, but I’m stumped now.

  3. IE displays the page titles (the white on black text) underneath the ship while they should be to the right of it, as in Firefox.

  4. IE lets the ship float (causing trouble again) squish over all the divs from the navbar to the bottom of the page, creating an invisible column somehow.

  5. This is kind of trivial, but W3C’s markup validator gives me a bizarre result regarding head and body tags. There’s nothing wrong with either, as far as I can tell. Any idea what’s going on here?

If anyone knows how I might address any of these, I would be immensely grateful.


#2

I’m also sick of CSS. It looks different in different browsers. It also looks different in different versino of same browser.

From what I experienced, you need to be careful with margin and padding. For example: margin-left: 20px; in IE 6, the margin to the left is 45px; in IE 7, it is 20px.

How I solved the problem is not to use margin. Specify the width of the layer and align text to right. Or place an empty layer.

I believe this is not the best solution. I’m still looking for the right solution and would like to discuss with you here.

Save $97 with promo code: [color=#CC0000]97YES Sign Up NOW[/color]


#3

This is only the case when you are using quirks mode. In standards mode (when you have a proper DOCTYPE declaration), margins and padding are calculated correctly in IE6.


si-blog | Keystone Websites
Save $97 on yearly plans with promo code [color=#CC0000]SCJESSEY97[/color]


#4

That’s true. I find cross browser compatibility to be much easier in standards mode.

I’m also a member of the FNE (float nearly everything) tribe. I find my sites almost always look identical in IE 6 and 7, Firefox, Opera and Safari.


#5

I am using , as according to this chart, it should render using standards mode on all browsers. There seems to be something else amiss here…


#6

Okay I have fixed numbers two (something about IE adding the padding to the total width of the cell) and three, hopefully. Hooray!

I also forgot to mention that four refers to the forum only.


#7

Thanks for the info! I did not know that. I just checked my page. I did not have any doctype specified.

I’ll try to specify the doctype for next project.

thanks again :wink:

Save $97 with promo code: [color=#CC0000]97YES Sign Up NOW[/color]


#8

This article has some excellent resources.

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/


#9

Thanks for the link. It is really good.

I refused to use CSS when it was first released. I do not trust the stablity of new tech including AJax.

But new tech is going to rule the world. I have to pick them up

Save $97 with promo code: [color=#CC0000]97YES Sign Up NOW[/color]