Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Stylesheets Problems


cczernia

Recommended Posts

I'm currently setting up a page and have borders around my images in the catalog with 10px padding. I created a stylesheet that does this, the problem is that it doesn't work in IE (6 or 7).

 

First I created a static page of how I wanted it to look. That looks fine in IE. However, when I tried to apply it to the osc version the styles don't work. They all work in firefox. Both versions of the page are linking to the same stylesheets.

 

If anyone could take a look or shed some light on the subject I'd appeciate it. Thanks in advance.

 

Static Version

http://www.waveridersgallery.com/portfolio

 

OSC Version

http://www.waveridersgallery.com/catalog

Shade and Sweet Water

Chris Czerniak

Link to comment
Share on other sites

Try running your 3 stylesheets through the validator. http://jigsaw.w3.org/css-validator/

 

And your page through as well: http://validator.w3.org/

 

Thanks for the tip but I came up fairly clean on both html and css review. Mostly missing alt tag or color and background color sets

Shade and Sweet Water

Chris Czerniak

Link to comment
Share on other sites

You'd have to wrap the images in <div>'s to get the padding applied in IE:

 

.thumbnail_profile {

border: 1px solid #666666;

padding: 5px;

width:388px;

}

 

<div class="thumbnail_profile"><img src="blah.jpg" width="388" height="242" alt=""></div>

Link to comment
Share on other sites

You'd have to wrap the images in <div>'s to get the padding applied in IE:

 

.thumbnail_profile {

border: 1px solid #666666;

padding: 5px;

width:388px;

}

 

<div class="thumbnail_profile"><img src="blah.jpg" width="388" height="242" alt=""></div>

 

This sort of helps but the problem is that the width isn't static. A lot of the widths will be 200 but if an image is portrait then the width is variable (and the height is 200). I can set the width to 1 and in IE is will resize the width to fit the image. Not so in ff/Ntsp. I can write a script that chooses one or the other but I would love one that works for both.

Shade and Sweet Water

Chris Czerniak

Link to comment
Share on other sites

Apply the rule to the image and do away with all the <div>s You shouldn't use block elements within block elements anyway.

 

CSS

 

img.thumbnail_profile {
padding: 5px;
border: 1px solid #666666;
margin-bottom: 5px;
}

 

Image

 

<img class="thumbnail_profile" src="images/kirk_bluebomb_tn.jpg" border="0"  />

 

Notice there's no width attribute in the CSS

Link to comment
Share on other sites

So it worked then?

 

No problem, don't mention it.

 

No, I still get the orignal problem. Note that I have two versions of the site. One I mocked up as a static html page and then converted it to osc. Both pages pointed to the same stylesheet. The static html version worked fine but the osc version did not.

 

You should find the links at the top of the thread. Thanks for the help though. I appreciate it.

Shade and Sweet Water

Chris Czerniak

Link to comment
Share on other sites

It is actually working. The border is now expanding with the image. FF works as it should but IE doesn't want to play, when it comes to the padding.

You could hack it to work or, would it be too much work to throw a 5px white border around all your images? Then you could do away with the padding.

Link to comment
Share on other sites

It is actually working. The border is now expanding with the image. FF works as it should but IE doesn't want to play, when it comes to the padding.

With the greatest respect Pete - the OP said it wasn't working in IE all along and posted here for a possible solution that works in both browsers? I agree with your idea of throwing a white border around all the images - Photoshop's batch tool would make light work of them all. Any CSS solution is going to be a bit of a hack job surprisingly.

Link to comment
Share on other sites

I agree with your idea of throwing a white border around all the images - Photoshop's batch tool would make light work of them all. Any CSS solution is going to be a bit of a hack job surprisingly.

 

Never thought of that. I only have a few images right now so that would work.

Shade and Sweet Water

Chris Czerniak

Link to comment
Share on other sites

With the greatest respect Pete - the OP said it wasn't working in IE all along and posted here for a possible solution that works in both browsers?

 

Hi Jason,

 

You are correct of course but to qualify what I said; when I checked the OP's site, the images expanded beyond the borders, which were fixed. I meant the code does now work, as the borders expand with the images.

 

I agree having to hack the CSS is a surprise, with IE7 at least. I thought problems like this were a thing of the past with IE7. I have only just upgraded to it so it will be interesting to see if the "broken box model" is actually fixed. >_<

Link to comment
Share on other sites

Looking at the code and the style sheet, I noticed

 

class="thumbnail_profil" in the code and thumbnail_profile in the style sheet.

 

 

Why would you even bother running your page thru one of the validator services? I'm just asking because I just did an experiment running 10 different websites that I use every day thru that service and ALL TEN had HUNDREDS of errors!! Obviously, most webdesigners aren't wasting their time fixing nitpicky 'error's right?

 

If the webpage works then why worry about tiny bits of code that aren't causing a problem? I'm just asking.

 

(I ran my site thru it and came up with 49 errors. Whatever!!! :D )

Link to comment
Share on other sites

Why would you even bother running your page thru one of the validator services? I'm just asking because I just did an experiment running 10 different websites that I use every day thru that service and ALL TEN had HUNDREDS of errors!! Obviously, most webdesigners aren't wasting their time fixing nitpicky 'error's right?

 

If the webpage works then why worry about tiny bits of code that aren't causing a problem? I'm just asking.

 

(I ran my site thru it and came up with 49 errors. Whatever!!! :D )

 

I don't know what you mean. The problem here was that the css class description was not displaying properly, and after several comments from others on possible corrections, I looked at the source code causing the problem and found a spelling error causing the class definition to be ignored.

GEOTEX from Houston, TX

 

(George)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...