CSS problems with my new site

My new site design can be seen at

http://www.rbell.net/Trial

If your using IE then there should be no problems. However if your using Mozilla you should experience the following

  1. If you click View -> Text Zoom and then select an option then my menu will scatter. You see in between the buttons I have the " " and in IE I’m able to avoid trouble when people change the text size by fixing the " " to a size of 18pt but like I say this doesn’t work on Mozilla, any tips?

  2. If your an IE user and you shrink your browser window you should see that I’ve customised your IE’s scrollbar to be orange and grey however on Mozilla this doesn’t work, anyone know how to get it to work?

  3. Anyone know a way to specify what order things download in. I’d rather the text was the last thing to appear rather than the first.

Also if you’d like to leave feedback please see my related thread on the Critique and Comment forum at http://www.kirupaforum.com/forums/showthread.php?p=575816#post575816

Thanks for your help,
RabBell.

  1. you should use em’s, set in teh body tag to font-size: 62.5%; and then use 1 em for default text size
  2. mozilla doesn’t display scrollbars because that’s not valid code, it’s only for ie because ie isn’t standards compliant

Sorry but I’m not sure what you mean.

Ah right ok I can live with that, thanks.

  1. I’m not to sure what you meant, that’s why I gave an ambiguous answer too :P,

it is possible that you could change the order things download in ie by changing the order of the stuff in the code, but it wouldn’t work in ff or mozilla because they parse text before images, why would you want to do that?

ok…uhm I’ll try explaining it like this…

My toolbar is made up of six rollover images and between them, to space them correctly, I placed these things “&nbsp.” to space them 5 pixels apart. The thing is that the “&nbsp.” is treated as a blank space by IE and Mozilla so if you change the browsers default font size the space size changes and my toolbar becomes a bit of a mess.

To try and fix it I put the “&nbsp.”'s in font tags and created a style in the stylesheet with a fixed font size of 20px. In IE it works fine. I increase the font size and IE the contents font increases but the menu stays the same, i.e. the spaces in the toolbar stay the same size.

However this doesn’t work in Mozilla, I increase the font size it increases in the toolbar to but, like I say, only in Mozilla…:puzzled:

any ideas?

by the way with the "&nbsp."s I’ve replaced the ; with a . otherwise it doesn’t appear in the post, just a space and with the loading in order, it was just an idea it’s not important. I just thought because I have a slow internet connection when I’m visiting the site the text appears and then maybe 15 seconds later the rest does too.

why not just have a list and have the images in the list, then use padding, look at this: http://css.maxdesign.com.au/listamatic/index.htm

yeah that looks like the solution, no time to do it before tomorrow, I’ve got meetings

I’ve always wanted to say that by the way :slight_smile:

but I will try it tomorrow, thanks bombingpixels :beer: :thumb:

your welcome, glad I could help :slight_smile: :thumb:

another thing

In IE, I hover over images and the alt message pops up beneath the mouse pointer but this doesn’t seem to happen in Mozilla, anyone know why :puzzled:

Hi RabBell… found this quote:

"The “ALT” information in the html image tag defines the text, which is display instead of the image in text only browser software. However, Netscape started to display this text when a user hovers over an image on the displayed page. Internet Explorer now also shows the same behaviour. Clearly, this usage of the ALT text is not conform with its original definition and Mozilla therefore refuses to implement this feature after a long discussion. However, some users and page programmers have got used to it and rely upon it. Mozilla provides the application interface which easily allows to add this behaviour. Piro (SHIMODA Hiroshi) provides the necessary code on his site to have the ALT text displayed as Tooltip again."


you can get the extension here: http://extensionroom.mozdev.org/more-info/popupalt

thanks undiminished, using title as well as alt worked a treat :thumb:

unfortunately I have a problem with the solution bombingpixels suggested, i.e. the list. The horizontal list works fine however when I add it to a table it seems to add an extra line to the row and I’m not sure why. I’ve attached an image which shows how the table looks (the row background has a light blue colour to highlight what I mean)

View image

I’ve attached the code as well, any help or tips would be appreciated cause I’m stumped.

View code

I tried adding the following

padding-right: 20px;
padding-bottom: 0px;

but that didn’t work…help :puzzled:

never mind, this link had the answer

http://www.sovavsiti.cz/css/horizontal_menu.html

glad you figured it out :slight_smile: