Forum Moderators: not2easy
First
You can find the bug on the <snip>
Present only in IE. It's about one of rounded corner of the div, notice, all other divs coded the same way could be seen.
The code of HTML is very simple
<div id="LogoNest">
<div class="LogoleftWrap">
<div class="LogorightWrap">
<img id="Logo" src="Img/Advertnav/images/AdvertNav_36.gif" style="float: left;"/>
<a href="#"><img src="Img/Advertnav/images/AdvertNav_40.gif" /><br />
<span>text in russian</span></a>
<div class="clear"></div>
</div>
</div>
</div>
CSS
div#LogoNest {
width: 100%;
height: 181px;
margin-top: 19px;
margin-bottom: 13px;
background-image: url(../Img/Advertnav/images/AdvertNav_35.gif);
background-repeat: repeat-x;
}
div.LogoleftWrap {
background-image: url(../Img/Advertnav/images/AdvertNav_34.gif);
background-repeat: no-repeat;
background-position: left top;
}
div.LogorightWrap {
background-image: url(../Img/Advertnav/images/AdvertNav_37.gif);
background-repeat: no-repeat;
background-position: right top;
}
Second
Could be seen on the <snip>. The problem is that tag <hr /> ignores margin of the parent tag <p>. How to fix?
HTML
<p>
<span class="case">text in russian</span><br />
<a href="#" class="black">text in russian <span class="small">text in russian</span></a><hr />
<a href="#" class="case">text in russian</a><hr />
<a href="#" class="case">text in russian</a><hr />
<a href="#" class="case">text in russian</a><hr />
<a href="#" class="case">text in russian</a>
</p>
CSS
div#Configuration p {
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
} (tag <p> is inside <div id="Configuration")
Third
The problem with width of element (you can see the bug on the <snip>). I'm setting the width of <a> element through CSS and it's displaied outside of the parent <div>. When setting through Javascript it's inside.
Javascript
<script language="JavaScript" type="text/javascript">
function showInfo() {
var a1 = document.getElementById("test");
a1.style.width = "100px";
var a2 = document.getElementById("test1");
a2.style.width = "100px";
}
</script>
HTML
<div class="SmallAdv">
<div class="LeftWrap">
<div class="RightWrap"><h2>text in russian</h2><br />
<a href="#" id="test"><img src="Img/Mainnav/images/adv_motherbrd_95.gif"/></a><br />
<a href="#" id="test1">Gigabyte Slimshady 478<br /> Socket</a>
</div>
</div>
</div>
CSS
div.SmallAdv {
float: left;
background-image: url(../Img/Mainnav/images/sm_tab_89.gif);
background-repeat: repeat-x;
}
div.SmallAdv div.LeftWrap {
background-image: url(../Img/Mainnav/images/sm_tab_88.gif);
background-repeat: no-repeat;
background-position: left top;
}
div.SmallAdv div.RightWrap {
width: 195px;
height: 203px;
padding-top: 17px;
background-image: url(../Img/Mainnav/images/sm_tab_92.gif);
background-repeat: no-repeat;
background-position: right top;
text-align: center;
}
div.SmallAdv a {
display: block;
width: 150px;
color: #000000;
}
--
No URL's please, see TOS [webmasterworld.com]
[edited by: limbo at 1:12 pm (utc) on Jan. 4, 2010]
Welcome to WebmasterWorld :). Ensure your pages are valid and that you have implemented a CSS reset first. This can catch bugs.
Here's a stab at it.
First - looks like having margins on the container with a specified height could be a problem there. Maybe use margins on the page elements above and below instead?
Second - <hr> is a deprecated element - maybe use the class .black with a border-bottom: ..? I'd also use an unordered list to display that content.
Third - Reset the CSS. See if that has any effect on the layout. Also as you have declared a width of both containers would float:right; help?
