Evening all,
I thought I had this CSS lark sussed but lo and behold yet another instance where I'm pulling my hair out trying to sort something.
The offending page is this one:
<!-- m --><a class="postlink" href="http://www.firstchoicevacationhomes.com/Stokes/accounts.asp">http://www.firstchoicevacationhomes.com ... counts.asp</a><!-- m -->
In Firefox the rows of buttons in the middle are next to each other, but in IE there's a gap between them.
How do I get rid of this gap? Also why are the buttons insisting on being slightly off to one side?
This is the CSS file:
<!-- m --><a class="postlink" href="http://www.firstchoicevacationhomes.com/Stokes/style.css">http://www.firstchoicevacationhomes.com ... /style.css</a><!-- m -->
And here's the offending code:
<div id="bigFrame">
<h2>Trade Accounts</h2>
<p>Welcome to your personal Trade Accounts page. Please select one of the following options:</p>
<div id="navHorizontal">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Standard Price List</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Your Price List</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Your Delivery Days</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Your Representative</a></li>
</ul>
</div>
<div id="navHorizontal">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"news.asp">Trade News</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Stock Availability</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Current Orders</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Order History</a></li>
</ul>
</div>
</div>
#navHorizontal {
width: 530;
height: 60;
margin: 0px;
padding: 0px;
background: #CCCCCC;
}
#navHorizontal li {
padding: 0px;
float:left;
list-style-type: none;
margin: 1px 1px 0px 0px;
}
#navHorizontal a {
margin: 0px;
padding: 0px;
display:block;
height:23px;
width:130px;
border: 1px solid #b67439;
background: #f9cf6b url(bg_nav.jpg) repeat-x bottom;
color: #892700;
text-align:center;
line-height:22px;
text-decoration:none;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
}
#navHorizontal a:hover {
background: #9e2d01 url(bg_nav_o.jpg) repeat-x bottom;
color:#fff;
}
I've added some un-necessary CSS properties in an effort to fix the problem, but to no avail...Change/remove the margin in #bigFrameI'll try it first thing in the morning
I don't see how it will make any difference though? The other text on the page is fine its just those Divs that are messed up... and the gap between them is surely nothing to do with the #bigFrame margin?Oh, I don't go against a Fang recommendation. Try this in bigFrame; it's definitely a margin issue.
margin: 5px 5px 20px 150px;Thanks! Sorry I should have twigged - I made the menu on the left 10px wider so that must have made the bigFrame div too small to take the contents, so IE messed them up
Made the buttons 10px smaller and its perfect now.
Cheers
I thought I had this CSS lark sussed but lo and behold yet another instance where I'm pulling my hair out trying to sort something.
The offending page is this one:
<!-- m --><a class="postlink" href="http://www.firstchoicevacationhomes.com/Stokes/accounts.asp">http://www.firstchoicevacationhomes.com ... counts.asp</a><!-- m -->
In Firefox the rows of buttons in the middle are next to each other, but in IE there's a gap between them.
How do I get rid of this gap? Also why are the buttons insisting on being slightly off to one side?
This is the CSS file:
<!-- m --><a class="postlink" href="http://www.firstchoicevacationhomes.com/Stokes/style.css">http://www.firstchoicevacationhomes.com ... /style.css</a><!-- m -->
And here's the offending code:
<div id="bigFrame">
<h2>Trade Accounts</h2>
<p>Welcome to your personal Trade Accounts page. Please select one of the following options:</p>
<div id="navHorizontal">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Standard Price List</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Your Price List</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Your Delivery Days</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Your Representative</a></li>
</ul>
</div>
<div id="navHorizontal">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"news.asp">Trade News</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Stock Availability</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Current Orders</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Order History</a></li>
</ul>
</div>
</div>
#navHorizontal {
width: 530;
height: 60;
margin: 0px;
padding: 0px;
background: #CCCCCC;
}
#navHorizontal li {
padding: 0px;
float:left;
list-style-type: none;
margin: 1px 1px 0px 0px;
}
#navHorizontal a {
margin: 0px;
padding: 0px;
display:block;
height:23px;
width:130px;
border: 1px solid #b67439;
background: #f9cf6b url(bg_nav.jpg) repeat-x bottom;
color: #892700;
text-align:center;
line-height:22px;
text-decoration:none;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
}
#navHorizontal a:hover {
background: #9e2d01 url(bg_nav_o.jpg) repeat-x bottom;
color:#fff;
}
I've added some un-necessary CSS properties in an effort to fix the problem, but to no avail...Change/remove the margin in #bigFrameI'll try it first thing in the morning
I don't see how it will make any difference though? The other text on the page is fine its just those Divs that are messed up... and the gap between them is surely nothing to do with the #bigFrame margin?Oh, I don't go against a Fang recommendation. Try this in bigFrame; it's definitely a margin issue.
margin: 5px 5px 20px 150px;Thanks! Sorry I should have twigged - I made the menu on the left 10px wider so that must have made the bigFrame div too small to take the contents, so IE messed them up
Made the buttons 10px smaller and its perfect now.
Cheers