5 replies [Last post]
patrickdepinguin
Offline
newbie
Last seen: 18 years 18 weeks ago
Timezone: GMT+1
Joined: 2004-07-25
Posts: 5
Points: 0

I re-made my website using CSS and XHTML, and the syntax of both is correct.

Now in Internet Explorer 6 everything displays as I intended, but when I check it in Opera, Mozilla and Firefox, there are some important differences.

Can someone help me further with this? Are there some helpful sites for CSS compatibility? What can I change in my stylesheet?

The front page is here:
http://www.patrickdepinguin.com
The stylesheet for this index page is
http://www.patrickdepinguin.com/patrickdepinguin_index.css

The problems that I experience are:
* the intro text below the title should remain in the blue bar, even when the browser window gets small. (the blue bar should expand)

* the iceberg has a blue bar "drawn" in the image itself. There is also a blue bar created with a CSS background. When the window gets big the blue bar in the image does not correspond with the css blue bar anymore.

* the two buttons bottom right should be fully inside the browser window and they should stick together.

On the content pages, like
http://www.patrickdepinguin.com/mint/howtogrow/
there are the following problems:

* The text overlaps for a few pixels with the navigation box on the right, upon resizing

* The list in the navigation box should not indent, it should be right below the word Navigation:

* In the crumb trail: ("You are here:") the blue bar should also expand upon resizing so that its text keeps inside.

The stylesheet for these content pages is
http://www.patrickdepinguin.com/patrickdepinguin.css

Thanks for any hints, tips, advice, ...
Patrick de Pinguin

patrickdepinguin
Offline
newbie
Last seen: 18 years 18 weeks ago
Timezone: GMT+1
Joined: 2004-07-25
Posts: 5
Points: 0

Re: How can I change my stylesheet to make it cross-browser?

patrickdepinguin wrote:
The problems that I experience are:
* the intro text below the title should remain in the blue bar, even when the browser window gets small. (the blue bar should expand)

When using the min-height property instead of height I get this solved in Mozilla, Firefox and Opera, but now Internet Explorer makes the bar a bit higher than 160px by default. Is there a fix to this?

Quote:
* the two buttons bottom right should be fully inside the browser window and they should stick together.

I tried to fix this with
#icons br { margin: 0px; }

which works for Firefox, but not for Mozilla and Opera. Why is that?
edit: Sometimes when refreshing the page in Mozilla it does display correctly, but just one refresh later they are apart again: how come??

Quote:

* In the crumb trail: ("You are here:") the blue bar should also expand upon resizing so that its text keeps inside.

Same comment as with the blue bar on the index page

Quote:

* The text overlaps for a few pixels with the navigation box on the right, upon resizing

I fixed this for Mozilla and Firefox by using
left: 80%
right: 10 px;

for the box, instead of
right: 10 px;
width: 19%";

However, it does not look ok for Internet Explorer nor for Opera. Aaargh...

Quote:

* The list in the navigation box should not indent, it should be right below the word Navigation:

This is solved by
margin-left: 0px; /*this is for IE and Opera */
padding:left: 15px;

instead of
margin-left: 20px;

patrickdepinguin
Offline
newbie
Last seen: 18 years 18 weeks ago
Timezone: GMT+1
Joined: 2004-07-25
Posts: 5
Points: 0

Re: How can I change my stylesheet to make it cross-browser?

I've made some progress myself, but there are still a few things that I'm having troubles with:

On the front page:

* in Internet Explorer, when choosing a smaller font than default, the css blue bar is narrower than the bar that comes from the iceberg image. All other browser display this correctly.

* In Netscape, Mozilla, Firefox and Opera: the css and xhtml icons sometimes stick together (like they should), but sometimes not. After refreshing the page it can switch around. I really do not understand how this can be possible.

* These same icons are not positioned correctly either. they should be in the bottomright corner, but in all browsers except for Internet Explorer, they go beyond the right browser border.

On content pages:

* In Internet Explorer and Opera: the navigation box is not displayed like it should. In Internet Explorer it goes beyond the right browser border, and in Opera there is overlapping with the content text.

On both: with Opera the blue bars on index and content pages have white spaces at both ends. How can I fix that?

Thanks a lot for any help!

patrickdepinguin
Offline
newbie
Last seen: 18 years 18 weeks ago
Timezone: GMT+1
Joined: 2004-07-25
Posts: 5
Points: 0

Re: How can I change my stylesheet to make it cross-browser?

patrickdepinguin wrote:

* These same icons are not positioned correctly either. they should be in the bottomright corner, but in all browsers except for Internet Explorer, they go beyond the right browser border.

I fixed this one.

Quote:

with Opera the blue bars on index and content pages have white spaces at both ends. How can I fix that?

This one I fixed too.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

How can I change my stylesheet to make it cross-browser?

Hi patrickdepinguin,
For the bar on the main page I would look at using a transparent background around the ice cube then it shouldn't matter how high the bar is.

For the icons, instead of using a break have you tried specifying a width for the container they are in and then floating each of the links right and clearing them on the right side.

Hope that helps

patrickdepinguin
Offline
newbie
Last seen: 18 years 18 weeks ago
Timezone: GMT+1
Joined: 2004-07-25
Posts: 5
Points: 0

How can I change my stylesheet to make it cross-browser?

Hi Tony,

Thanks for your reply.

The blue bar is drawn in the image because I want the anti-aliasing look nice. If I'd use a transparant background I'd have some white pixels agains the blue bar, just like you'll see when you make the screen much smaller so wrapping appears. (Is this clear?)

For the icons, I changed as you suggested and it works indeed. Thanks a lot!