Some checks please (Full Version)

All Forums >> [Web Development] >> Site Critiques



Message

jaybee -> Some checks please (8/2/2006 6:07:08)

I'm testing a possible new layout and some theories which may be completely off the wall. I won't say what I'm expecting to see but will just ask if people can check this in different browsers, particularly Mac and IE7, and at different sizes and resolutions.

For those css gurus amongst you, can anyone see why the footer moves on hover in IE6 but not in Opera, FF etc. I'm going code blind.

http://www.bromley-blacksmith.com/



Nicole -> RE: Some checks please (8/2/2006 6:24:44)

Hi Jaybee,

If I remove the following it stops happening in IE.

quote:

#footer a {text-decoration:none;}
#footer a:link {color:#666;border-bottom:1px solid #f90;}
#footer a:visited {color:#999;border-bottom:1px solid #f90;}
#footer a:focus {color:#f90;border-bottom:1px solid #666;}
#footer a:hover {color:#f90;border-bottom:1px solid #666;}


But I guess you know that. But to me that would mean that margin or padding has to be added to those properties, because it's not there now.

I don't have a Mac or IE7 so I couldn't help in that respect.

Nicole

Edit: Sorry, I just realised that's obvious as it'd happening on hover.



jaybee -> RE: Some checks please (8/2/2006 6:29:02)

Mmmmmm tried that and it still moves so I took it out again. It has to be something to do with the box model problem but at the moment it's just not registering.

Did you check out the page resizing?



Nicole -> RE: Some checks please (8/2/2006 6:32:07)

No, but I just added a right margin to #footer p and it's keeping it rather steady in IE but of course in FF it's moved further left.

Could it be a case of IE doubling margins? I struck that in my site or the last client's site ( I forget), had to tell IE to half the margins.



Nicole -> RE: Some checks please (8/2/2006 6:43:28)

Replace:

#content {width:45%;padding:5px 5% 20px 31%;border-right:3px double #000;}

With

#content {width:45%;padding:5px 0 20px 31%;border-right:3px double #000;}


Edit: I know that squashes everything against the right border, but can you apply that padding individually rather than to the whole div?



jaybee -> RE: Some checks please (8/2/2006 6:49:31)

Yes ta, that works but then all the content is hard up against the border. I don't particularly want to stick another containing div in if I can help it and I definitely don't want to use any hacks.

Anyways, ignoring that which I'll fix one way or another, what about the resizing?



Tailslide -> RE: Some checks please (8/2/2006 6:52:40)

The image is a bit jaggy at 1280 pixels wide... you're going to need a really big image to get it looking smooth at reasonable resolutions. Wouldn't it be nice if SVG were supported properly!

The jump is probably a re-flow issue . If you remove the border bottom on the hover link and replace it with text-decoration:underline; it goes away.



jaybee -> RE: Some checks please (8/2/2006 7:10:46)

Yes, pain isn't it. Border bottom or text decoration. Shouldn't really make a difference should it? Anyway, fixed that by shoving in an extra div.

Yes, the resizing. That's what I was after. Because of the page design the image needs to resize with the page or at some resolutions it just looks really daft.

I'm trying to figure out what image size I can get away with without it looking really bad.

Where the heck has JP2 gone? It seems to be taking forever to appear in browsers.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
6.298828E-02