Fri, 2004-03-12 14:20
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
Sun, 2004-03-14 20:34
#1
A number of inconsistencies
Hi trib,
Try taking the quotes out of the url
Quote:
should be:list-style-image: url('/lib/img/buttons/login.gif');
list-style-image: url(/lib/img/buttons/login.gif); I'll try to have a look at the others after work.
Sun, 2004-03-14 22:36
#2
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?
Mon, 2004-03-15 07:47
#3
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.
Mon, 2004-03-15 08:42
#4
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.
Mon, 2004-03-15 09:54
#5
A number of inconsistencies
Hi Trib,
I don't know why the list images disappear but I have a solution 
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. 
I can't get to the other pages to have a look at the others your server must be down.
Mon, 2004-03-15 10:15
#6
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.
Sat, 2004-03-27 11:42
#7
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.
Fri, 2004-04-16 15:10
#8
A number of inconsistencies
Tony wrote:
Hi Trib,
I don't know why the list images disappear but I have a solution
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.
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!