Attributes not aligned on large widescreen computer

[BrookieWookie]

Hi Guys,

not sure if anyone can help as I need someone that has a really large wide computer screen

basically i thought my page layout was fine as i have tested it on different browsers and computers, then my sister rang me and said her new work computer doesnt let you click on the attributes to pick the colour etc. I thought it was an explorer problem, but ive tested and its definitly the screen size I think

Ok ive looked though my style sheet and think it has something to do with the padding but because i cant get on her computer with firefox to test it, i dont want to mess with changing the padding as blindly as i might just stuff it totally.

I know a small percentage of customers would only have this size screen and it may not be worth worrying about, but I thought i would post this thread incase others had a similar problem

my site is
www.rubirocket.com/store

mostly in the neon pop product section

[kuroi]

This is nothing to do with the width of the screen. I can launch browser windows up to about 3000px wide, but it makes no difference as you have a fixed width site.

Rather this is about browser versions. The structure of the area displaying the attributes is rather messed up in all browsers, but especially so in Internet Explorer 7 where the image that you have added sits on top of the attributes preventing them from being selected.

The code in this area has become a bit overly complicated due to all the font tags that have been added, and although they are not the cause of the problem, having to plough through them does make spotting the problem more difficult.

I suspect that the problem lies with the different types of elements being mixed together, some inline, some block and some floated. If you can clear out those font tags and validate your site, then I'd be happy to take another look.

[BrookieWookie]

thanks for checking that for me

so do you want me to delete the fonts that i selected in the css

sorry i dont understand what to do, I have fumbled my way through so far, im actually surprised i got this far

[BrookieWookie]

ok im tryed to validate my css and found many errors warnings etc

It may take me awhile to go through them all, but all try to work fast, im just trying to figure out what to change etc

[kuroi]

so do you want me to delete the fonts that i selected in the css

You have lots of font tag pairs (<font face="Ariel"> + </font>) embedded into your code, rather than being set in the stylesheet. This makes unravelling what's going on there much more difficult. These are often the result of editing in a WYSIWYG editor and then cutting and pasting bloated code into a Zen Cart script. So feel free to set your font to Ariel, but I'm recommending that you remove the font tags and set your fonts through CSS.

To see the extent of the font tags, just add the following to your stylsheet and you'll see them highlighted

font {border: 2px dotted red}

Your validation problems should be fairly easy to fix <br> becomes <br />, & becomes &amp; and the other two are where <p> tag has been opened but not closed and similarly for a <font> tag (but hopefully they're all going anyway).

[BrookieWookie]

thanks Kuroi,

ok my html and css is validated, no errors, i still am working on the warnings though, trying to figure them out.

I still not sure how to set the font in the css, but is this what you mean

eg this was before

#productAttributes {
float: left;
width: 100%;
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
padding: 5px;
font-family: Arial, Tahoma, Verdana;

i now have deleted this line
font-family: Arial, Tahoma, Verdana;

do i need to do this throughout the stylesheet and also do i need to change float: left: or delete it?

I dont have explorer 7.0 to test it but it looks ok in netscape, firefox and explorer 6.0

I noticed in 6.0 though that the page is wider than it is set to, about a 1 inch blank gap to the right of the right sideboxes, i dont think it was like that before

anyway am i doing this correctly

[BrookieWookie]

oh before i forget alot of the warnings im getting are about the color and background colour not matching somehow

i read on another forum that if i add

background-color:inherit;

to the these warning sections and it may correct the problem
has anyone else tried this code?