Smaller monitor causing problems

[ChrisL]

Hi,

Check out the following page here (http://www.bywaysdental.co.uk)

Having finished the bulk of the design, I find that the page doesn't fit properly in smaller monitors (the logo and banner heading no longer on the same line for example).

Will I have to completely re-write the site, or is there something I can do to fix it? I've used %'s for the layout, so shouldn't it just fit by itself??

Shortcut to the CSS here. (http://www.bywaysdental.co.uk/style.css)

Thanks,
Chris.

[felgall]

If your graphics are too wide to fit across a narrower screen then they will wrap onto separate lines. If you want to keep them on one line then their total width must be less than the narrowest screen you want to support. If you want to support webTV that width is 544 pixels. VGA monitors will be able to fit a width of about 620 pixels.

[ChrisL]

Hi, thanks for your reply.

It's not that the graphics are too wide for the monitor size, but the <DIV>'s aren't re-sizing to fit.
The top line of logo & green bar for example...

The #wrap DIV is 99% of the screen;
The #logo DIV is 12% of the #wrap, and;
The #heading DIV is 80% of the #wrap.

Now, I know there is a 15px left padding for the logo (how much % is 15px???), so how can I change it so it displays correctly...?

-----------------

There is also a problem with the font sizes on some of the separate menu's on certain pages. As the monitor size decreases, it pushes the menu to two or three lines, rather than just the one.

How can I amend so it fits, regardless of the monitor size?

Thanks,
Chris.

[Green-Beast]

Try adding display:inline to your floated elements. If the widths are norrow enough, that should help. If not, then something is too wide.

width+margin=new width

HTH

Mike

[toicontien]

Setting the display of a floated element to inline doesn't do anything, as the standards state that any floated element becomes a block level element. Internet Explorer-Win removes a bug in how it calculates margins of floated elements when you set the display to inline.

The total width of the layout must be at least the width of the logo plus the width of the heading. You can use the min-width CSS property to make sure the layout width is not narrower than X number of pixels. Bottom line, you're not dealing with tables so things won't auto resize to fit their contents. Things fit or they don't. Period.

[Green-Beast]

Setting the display of a floated element to inline doesn't do anything, as the standards state that any floated element becomes a block level element. Internet Explorer-Win removes a bug in how it calculates margins of floated elements when you set the display to inline.

Perhap I misunderstood, I just know that'll stop block level elements outside the float from dropping in IE. I just had a case [1] where I need to apply display:inline to a floated element (content) to get an adjacent element (sidebar) which came after the content in the html, to sit in place, next to the floated element. Just in IE. 'twas fine in everything else.

[1] http://green-beast.com/portfolio/jwa/index2.php

Mike

[toicontien]

Ok, I'm pickin' up what you're puttin' down. However, ChrisL's problem was happening cross browser. It doesn't seem like a browser quirk. It's simply a misunderstanding of how the standards work.

[Green-Beast]

Ok, I'm pickin' up what you're puttin' down. However, ChrisL's problem was happening cross browser. It doesn't seem like a browser quirk. It's simply a misunderstanding of how the standards work.

Agreed :)