Are there any CSS Gurus out there?

[carseman]

Help!!
I have been playing around with CSS, trying to simplify my pages. I think that I am happy with the basic layout but I have a problem. When I put an image on the page it looks fine at 1024 width with both IE6 and Firefox but as soon as I try reducing the width with IE, the image top baseline always goes downwards and ends up level with the bottom of my lefthand menu column. Does anyone have any suggestions/fixes?
A basic example page is at www.carseweather.co.uk/scotmetuk.htm
Another example using “Alternative” software (which I intend to port to WD )

[administrator]

It sounds like your images are too big to fit alongside the menu in a smaller window size. I can’t think of a solution though (at least not with my brain about to shut down for the night!)

[carseman]

Chris,
I have tried putting in a 1024 x 1 pixel line graphic above the column divider but this does not even work.

[krelvinaz]

I’ve had the same issues… What I did for the wide graphic stuff is set them up as popups. This means the original page is there, but the large graphic is opened in a seperate window of the size big enough to provide a good view. There is no menu on that window, just a Close Window button.

Its not accessible perse but neither is the content that I am popping up.

You can see the result by looking at the links under Live Content on my page.

WD Console
MesoMap

Are all popups, and under webcams, I have a popup button to put the webcam in a popup too.

[stevecat]

[quote author=carseman link=topic=11336.msg85504#msg85504 date=1127596038]

Another example using “Alternative” software (which I intend to port to WD )

[krelvinaz]

@stevecat post:5

Firefox does it right by simply truncating the image if it doesn’t fit on your viewscreen.

I’ve never seen Firefox trucate an image before. What version are you using?

As far as I can tell… on the page he referred to, I got the same result with Firefox that I got with IE.

I think that if you attempt to design your pages to fix 800x600, you will normally be fine.

For my site only 14% of users hit it with 800x600, 0% smaller and the rest bigger.

[krelvinaz]

BTW… stevecat nice looking avatar.

[carseman]

I’ve found the answer!!

thanks Steve

[quote author=stevecat link=topic=11336.msg85554#msg85554 date=1127625885]
Looks like the good 'ole IE float bug.

[carterlake]

@carseman post:8

I’ve found the answer!!

thanks Steve

I found it at thescripts.com at http://www.thescripts.com/forum/thread161450.html

The answer was to put the main content and sidebar within a container

which had position: relative; and padding: 1px;
the sidebar then has position: absolute;

Thanks to everyone for their suggestions. Now to get on with general tidying.

Chris

By golly! That works… still for usability and “look”, you should consider making things fit into 800x600…

Notes of caution:

1. If you decide to switch your template over to this, be prepared to fix some minor layout issues on a number of pages.

2. If the main copy is not large enough to fill the length of the sidebar, the footer will now come up into the sidebar area (not looking good). That only affects two of my pages and I’m a bit stumped as to how to fix with CSS to prevent it. In the meantime, I’ll look at filling those two pages with a bit more content to prevent it.

[carseman]

@carterlake post:9

… still for usability and “look”, you should consider making things fit into 800x600…

Tom,
I totally agree. I am striving after a clean, easy to read site.

[administrator]

@carterlake post:9

still for usability and “look”, you should consider making things fit into 800x600…

I don’t agree. I tend to use monitors with higher resolutions than 800*600 and I’m irritated by pages that have large blank areas either on both sides of the content or just to one side. They usually make me have to do more vertical scrolling to see all the content than is really necessary.

I’m not suggesting making displays fit 1024768 or any other fixed width…making them bigger will irritate people with small monitors and even if you chose 16001200 you’d find someone running at 2048*1536! I’d much rather see dynamically re-sizing pages which make as much use of the available screen area as possible.

[carseman]

Chris,
I think that the operative word is “fit” into 800x600.

[carterlake]

@carseman post:10

I just feel guilty about using your ideas.

I’m always flattered when someone copies something of mine… it means I’m doing something right. 8)

@carseman post:10

I think that the operative word is “fit” into 800x600. It should not be unreadable with the smaller screen size.

Right. I always try to view my site on both Firefox and IE at multiple screen resolutions to make sure everything flows… I can’t imagine anyone surfing at those higher resolutions and not have pages in windows that are smaller. All the “big” sites look horrible at those resolutions. Hey! I’m one up on the big guys.

[administrator]

@carterlake post:13

I can’t imagine anyone surfing at those higher resolutions and not have pages in windows that are smaller.

I’m currently running at 12801024 and almost always run with the browser in full screen mode. It’s so easy to switch between windows (task bar or Alt+Tab or FF tabs) that I don’t see any reason to put things into smaller windows unless I’m doing something where I need to see two screens of info at once. Maybe that’s why after over 25 years of working with computer monitors I still have 2020 vision?

I agree that pages shouldn’t become invisible at lower resolutions, but they shouldn’t waste screen space that’s available for use. I sometimes view web pages on my phone at 240*160…perhaps I should campaign for all pages to be small enough for me to see them at that resolution

[carterlake]

@administrator post:14

I agree that pages shouldn’t become invisible at lower resolutions, but they shouldn’t waste screen space that’s available for use. I sometimes view web pages on my phone at 240*160…perhaps I should campaign for all pages to be small enough for me to see them at that resolution

Well, ultimately, I plan on having the page add a right column of information when it detects it has enough room… but that’s a ways off. I’m still tweaking the format, adding content, and fixing browser-specific issues.

Fact of the matter is though… 1 in 4 people view the web at 800x600, so a webmaster shouldn’t ignore that significant of a segment. (Source: W3Schools )

[administrator]

@carterlake post:15

Fact of the matter is though… 1 in 4 people view the web at 800x600, so a webmaster shouldn’t ignore that significant of a segment.

I agree, but there’s a good chance that most of the other 3 in 4 people are using higher resolutions than 800600 and too many sites disregard that majority by still building sites that are fixed for 800600 viewing. I find the huge white (or increasingly morbid black) empty side bars on a site put me off the site and I tend to irrationally spend less time on sites built that way #-o

[carterlake]

@administrator post:16

I agree, but there’s a good chance that most of the other 3 in 4 people are using higher resolutions than 800600 and too many sites disregard that majority by still building sites that are fixed for 800600 viewing. I find the huge white (or increasingly morbid black) empty side bars on a site put me off the site and I tend to irrationally spend less time on sites built that way #-o

Well then I definitely made a positive change in web design… I think my site looks fine in both 800x600 and 1024x760. Well, except I need a 21 inche monitor to be able to read at the higher resolution… :lol:

[carseman]

Forgive me if I am wrong, but I see CSS (when it behaves as expected) as beinig able to produce a full page for those with higher resolution, but for those with less, the page will be vertically extended. As I see it, the art (which I have not mastered) is to produce pages which appeal to both kinds of users.

Chris

[administrator]

CSS can undoubtedly produce pages that size themselves dynamically. This forum site uses CSS based templates and it does just that. I suspect that some people pick fixed sized templates, perhaps based on CSS, and then implement them without thinking of how they’ll look to other users with bigger (or smaller) screens.

[krelvinaz]

I try to look at sites I design in both 800x600 and my normal view.

The Extension Web Developer for FF has a nice feature on it that resizes a screen to what size you want ot view it at.

There is also this site which is 640x480 which is really not used any more.

http://www.serve.com/apg/workshop/640x480Test/index.html

Even at that resolution, most of my pages still look okay.

One of the issues in the past was that using a width of % was not consisered accessible though I never could figure out why. Accessiblity checkers would *itch at the fact you were not using fixed widths. That has changed and a lot more sites are learning not only width but also font sizes in non-fixed settings.