8 replies [Last post]
trib
Offline
Regular
London, UK
Last seen: 15 years 19 weeks ago
London, UK
Joined: 2004-03-12
Posts: 11
Points: 0

I am attempting to redesign an e-Commerce shopping site using CSS-only design. I've come up with several odd layout inconsistencies, one of which I've already solved by reading this forum, but perhaps you chaps can help with these:

1. http://ab-eshop.ginger.assanka.com/browse?id=0
Check out the navigation bar at the top right - in IE6 the icons so not appear, in Mozilla Firefox they do. Is it simply the case that IE will not display bullets if the list elements are floated? Code is as follows:

ul.contentnav li, ul.functionnav li {
float: left;
margin-left: 5px;
margin-right: 5px;
}
ul.functionnav li#login {
list-style-image: url('<?=DIR_PATH?>/lib/img/buttons/login.gif');
}
ul.functionnav li#basket {
list-style-image: url('<?=DIR_PATH?>/lib/img/buttons/basket.gif');
margin-left: 35px;
}

2. http://ab-eshop.ginger.assanka.com/browse?id=175
MSIE seems to measure the vertical margin of the product container from the bottom of the previous one's lowest float (because I've set clear:both), but Mozilla measures it from the lowest non-floated content.

.intcontent .product {
clear: both;
margin-top: 10px;
margin-left: <?=DIM_SMALLPIC+10?>px;
}
.intcontent .product img {
float: left;
border: 0px;
width: <?=DIM_SMALLPIC?>px;
margin-left: -<?=DIM_SMALLPIC+10?>px;
}
.intcontent .product .namelink, .intcategories .product a.namelink:visited {
color: black;
font-weight: bold;
text-decoration: none;
display: block;
}
.intcontent .product .description {
color: black;
margin-bottom: 6px;
}
.intcontent .product .price {
color: rgb(153,17,18);
font-weight: bold;
display: inline;
margin-right: 10px;
float: left;
}
.intcontent .product a.infolink {
background: #888 url('<?=DIR_PATH?>/lib/img/buttons/moreinfo.gif');
width: 92px;
height: 10px;
display: block;
margin-top: 2px;
float: left;
}
.intcontent .product a.infolink span {
display: none;
}

3. http://ab-eshop.ginger.assanka.com/login
The submit and cancel buttons are supposed to be right aligned - they are in Mozilla, but an odd margin appears in MSIE.

form .buttons {
text-align: right;
clear: both;
width: 100%;
padding-top: 5px;
}

4. Go to http://ab-eshop.ginger.assanka.com/viewproduct?id=1 and add a product to the basket. The links in the top right of the main white area are supposed to be right aligned - MSIE does, Mozilla doesn't!

Regards,

Andrew Betts

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

A number of inconsistencies

Hi trib,
Try taking the quotes out of the url

Quote:
list-style-image: url('/lib/img/buttons/login.gif');
should be:list-style-image: url(/lib/img/buttons/login.gif);

I'll try to have a look at the others after work.

trib
Offline
Regular
London, UK
Last seen: 15 years 19 weeks ago
London, UK
Joined: 2004-03-12
Posts: 11
Points: 0

A number of inconsistencies

No luck with that - have removed the quotes from the two list-style-image properties, but it's the same - icons are displayed in Mozilla, no bullets at all in MSIE. I got the syntax from Devguru, which states that quotes are required.

http://www.devguru.com/Technologies/css/quickref/css_liststyleimage.html

Any other suggestions, and is there a better CSS reference I should be using?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

A number of inconsistencies

Hi trib,
The quotes are optional http://www.w3c.org/TR/CSS1#url
Could the path be causing the problem?
The path is meant to be relative to the CSS file, I think Mozilla based browsers get this one wrong and are relative to the html file. So if its wright in Mozilla maybe its really wrong :roll:

Try removing the width from .buttons, that seems to align them better.

trib
Offline
Regular
London, UK
Last seen: 15 years 19 weeks ago
London, UK
Joined: 2004-03-12
Posts: 11
Points: 0

A number of inconsistencies

Removing width works great - one down!

regarding the paths, all other image urls in the stylesheet work in both Mozilla and IE, it's just these two list-style-image properties. I did try changing them to:

list-style-image: url('../img/buttons/basket.gif');

But the effect is exactly the same.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

A number of inconsistencies

Hi Trib,
I don't know why the list images disappear but I have a solution Cool
Use List-style:none; give the li padding on the left and position the image as a background for the li.

li{list-style:none; 
padding-left:10px; 
background-image:url(login.gif); 
background-repeat:no-repeat; 
background-posityon:left center;} 
That should be two down and two to go hopefully. Smile
I can't get to the other pages to have a look at the others your server must be down.

trib
Offline
Regular
London, UK
Last seen: 15 years 19 weeks ago
London, UK
Joined: 2004-03-12
Posts: 11
Points: 0

A number of inconsistencies

Excellent - that was my biggest headache. Very creative solution, thanks for that. I guess the moral there is to stick with what works. Sorry about the connectivity, the server is a development machine that's not really designed for external access so it's only connected to the net via ADSL. As far as I can tell it's working at the moment.

It's now looking perfect in IE!

I thought wrt. the margin (point 2), there could be a solution in using a clearing DIV, like <div style="clear:both"></div> as the last thing in the product container, but that seems like cheating.

trib
Offline
Regular
London, UK
Last seen: 15 years 19 weeks ago
London, UK
Joined: 2004-03-12
Posts: 11
Points: 0

A number of inconsistencies

ok, I think I've solved point 2 - I did have to add a

<div class="clear"></div>

At the end of the product container, since otherwise the container does not include the price and more info links.

To solve the button issue, I noticed that my CSS that defined the background of each button was using a background: propery, not the background-image: one. As a result mozilla was (correctly) not implementing the background colour change on hover which had been defined earlier.

Thanks for your help Tony.

TRMJeff
TRMJeff's picture
Offline
newbie
Texas
Last seen: 15 years 26 weeks ago
Texas
Joined: 2004-01-21
Posts: 8
Points: 0

A number of inconsistencies

Tony wrote:
Hi Trib,
I don't know why the list images disappear but I have a solution Cool
Use List-style:none; give the li padding on the left and position the image as a background for the li.
li{list-style:none; 
padding-left:10px; 
background-image:url(login.gif); 
background-repeat:no-repeat; 
background-posityon:left center;} 
That should be two down and two to go hopefully. Smile
I can't get to the other pages to have a look at the others your server must be down.

This was a VERY clever solutions. I implemented that on all my clients' bullet lists and it works really well. Thanks!