Hey Guys,
Need some quick help. Having a problem with the top tab and don’t know what s causing it in ie6 and 7.
Here’s a link to the file - http://revolveclothing.com/html/b/3.0/browser_testing/myaccount_pages/drop_down.html
Just back from holiday today so post again of you are still having problems with this :).
ok 
The float:left and clear:left on the main list makes IE render lists correctly without any whitespace gaps. It’s the easiest method to get a solid list with no gaps and for margins to work consistently.
I then set position relative on the list element to act as a stacking context for the absolutely placed close icon. This allows the original anchor to be full width but with the close icon sitting on top of the other anchor and positioned in respect of the current list item and not the viewport. (If the text gets in the way then reduce the width of the anchor holding the text and add some padding right to protect the close icon.)
The close icon was absolutely placed and all the styles were mainly cancelling existing styles set on the anchor so they didn’t interfere. The clear:both on the close icon styles was to cure an IE6 bug that makes the icon disappear.
Lastly I removed the float you had on the image as that would move it again and complicate positioning.
Hope that makes sense
Thanks paul,
The got the “x” where I needed it but in ie6 it’s displaying this spacing on the “li” elements, do you know how I can fix this spacing. Also is there any way to still get the li anchor grey color to still cover the whole li element on rollover?
Here’s a link to the page - http://revolveclothing.com/html/b/3.0/browser_testing/nicho_test/myrevolve_pop-ups.html
You gain 10 Awesome Points for asking this. : )
Thanks Paul, it worked great. If you have the time can you explain to me what is being done for it to work. If it’s not too much trouble, would just like to understand what was is being done.
Thanks
HI,
The anchors are set to the width and height of the block so you can’t have two in a row. You would need to change the width of the anchor and add a class to the “x” anchor instead like so:
ul.boutique_list li {
height: 70px;
display: block;
border-bottom: 1px solid #474747;
width: 287px;
[B]overflow:hidden;/* clear:float*/[/B]
}
ul.boutique_list li a {
width: 287px;
[B] width:270px;/* reduce width*/[/B]
height: 60px;
display: block;
padding-top: 10px;
[B] float:left;/* float it so that anchors are horizontal*/[/B]
}
[B]ul.boutique_list li a.closex{
float:right;
width:15px;
height:auto;
margin:10px 0 0;
}
ul.boutique_list li a.closex:hover{background:transparent}[/B]
<li><a href="#"><img class="thumb" src="http://revolveclothing.com/html/b/3.0/browser_testing/nicho_test/my_revolve/images_myrevolve/boutique_thumb6.jpg" /><span class="text">Iris Lin’s Boutique</span></a><a [B]class="closex"[/B] href="#"><img class="bout_x" src="http://revolveclothing.com/html/b/3.0/browser_testing/nicho_test/my_revolve/images_myrevolve/pop_up_close.gif" /></a></li>
Thanks for the help guys got everything sorted out…
Have something else I wanted to see if anyone can help me out on. This is the page.
http://revolveclothing.com/html/b/3.0/browser_testing/nicho_test/my_revolve/myrevolve_pop-ups.html
The problem I am having is I need this “x” to be a separate link but when I place it inside the li element it gets pushed to the li element below it.
The red showing through on the bottom in IE6 is because you have incorrect heights.
In IE7 I could see red only on the right side of the last list item as shown in the screenshot. FF/Linux didn’t show it, until I changed the width of News from 31px to 30px (then it looked like IE7). Without the red to show, nobody would know either way.
Without the red to show, nobody would know either way.
Yes of course
Because you put red behind it? If you remove the red from the ul, nobody will see the 1px difference between browsers.
Either that you you have to calculate out every li and anchor’s total width and make sure they always == 190px. Side borders and padding add to total width.
It would matter if the anchors gained a background colour on hover/focus/ or selected.
Paul,
I updated the file.
It’s on the same page, and same area you commented on before.
It’s looks like that in just about every browser mac and pc except for safari.
Hi,
The red showing through on the bottom in IE6 is because you have incorrect heights. You set the list to 23px high but the anchor is 27px and therefore pushes the parent higher.
.leftnav_header li {
margin: 0px;
float: left;
padding: 0;
[B] height: 27px;
overflow:hidden;[/B]
}
Change the list to the correct height and hide the overflow.
To make them fit exactly horizontally cross browsers you would have to do as Stomme suggests above and give widths to all three elements so that fit exactly and hide any overflow just in case they spill out.
It’s never a good idea to make multiple elements fit in a small space because browsers will always render the width and height of text differently. Always try to leave breathing space around elements or else control the widths exactly and hide any overflow if overflowing will break the layout.
In IE6 you can’t place an element that has “haslayout” inside a widthless floated parent or it just stretches to 100% width.
Just float the anchor also.
.leftnav_header li a {float:left;}
What page is that on (and which browser)?
I just had a look and all I could see was a big red block so I guess you haven’t updated the page yet.
I’m just going offline now but will have a look in the morning if you can point me in the right direction
Thanks Paul,
Do you know how I can fix that one pixel red space next to news. No matter what size I make the button it will not work. I can’t get anything to fit and in ie it completely shifts the tab down…
Hey Guys, need some help with some tabs I created… Everything looks fine on a mac, but on a pc the tab buttons gift shifted and break the layout.
Here’s the link to the actual page - http://revolveclothing.com/html/b/3.0/browser_testing/nicho_test/my_revolve/myrevolve_super-user_shop.html
Any help is appreciated.
I also just found out ie6 is displaying the tabs like this 
It is only displaying one of the buttons…
Hi,
You could do this instead.
ul.boutique_list li {
height: 70px;
display: block;
border-bottom: 1px solid #474747;
[B] width: 305px;[/B]
overflow:hidden;
margin: 0;
padding: 0;
[B] float:left;/* for ie6 important */
clear:left;/* " " */[/B]
}
ul.boutique_list li a {
height: 70px;
display: block;
float:left;[B]
width: 305px;
[/B] margin: 0;
padding-top: 10px;
}
ul.boutique_list li a:hover {
background-color: #1f1d1e;
text-decoration: none;
}
[B]ul.boutique_list li{position:relative;}[/B]
ul.boutique_list li a.closex {
[B] position:absolute;
width:19px;
height:18px;
margin:0;
padding:0;
background-color: aqua;
right:5px;
top:20px;
clear:both;[/B]
}
[B]ul.boutique_list li a.closex img{
margin:0;
float:none;
position:absolute;
}[/B]
That should fix all the issues and the gap at the bottom of the whole list in iE6.
Hi,
It looks like you just failed to account for your borders when you set the width on #lower_wrap. Set th width at 194px and then it will total 196px with the borders (same as the parent)
z-index only works when an element is positioned so it is not doing anything there. No need for that border-top rule either, you aleady set borders on all fours.
/**---------sign_in dropdown-----------**/
#drop_down_wrap {
[COLOR=Blue]width: 196px;[/COLOR]
height: 240px;
font-size: 11px;
background-color: orange;
display: block;
}
#lower_wrap {
width: [COLOR=Blue]194px;[/COLOR][COLOR=Red]/*196px;*/[/COLOR]
height: 198px;
background-color: #393939;
[COLOR=Blue]border: 1px solid #525252;[/COLOR]
font-size: 11px;
display: block;
float: right;
[COLOR=Red] /*z-index: 2;*/
/*border-top: 1px solid #525252;*/[/COLOR]
}