Forum Moderators: not2easy
I created the below style for the mouse hover property. The last style border-bottom: 1px dashed #6185db; creates a dashed border at the bottom of hyper links. This affect I thought looked kinda of neat and worked perfectly fine in Mozilla and IE. In Opera as soon as you move your mouse over a hyper link the page breaks. My main content in the center kicks down and an entire line just below my left hand navigation menu. What would be causing this? I thought it might be width but why should it be width when the border should not be going outside of any block element. The style only applies to the length of the hyper link which are more then enough room to fit within the block elements I have. If I remove the border-bottom style the issue goes away. Any ideas?
a:hover
{
color: #0066CC;
text-decoration: none;
background-color: #dde5f7;
border-bottom: 1px dashed #6185db;
}
a:link, a:visited {
border:1px dashed transparent;
}
that way you aren't rewriting the page on hover, just changing the color of the border. Currently you're adding 2px in both directions on hover, easily enough to break the page.
if transparent doesn't work, just use the same border color as the background color.
a
{
color: #0066B2;
text-decoration: none;
}a:hover
{
color: #0066CC;
text-decoration: none;
background-color: #dde5f7;
border-bottom: 1px dashed #6185db;
}
Adam
Frustating....
It just hides the bottom border affect.
this suggests that your containers are too small for the added pixels the border puts on your link box.
this suggests that your containers are too small for the added pixels the border puts on your link box.
Yes that's what I thought. But why would it do this then when I mouse over links not even in that block element. Nothing else breaks. It's odd. Especially when you look at everything it shows plenty of room. Wish I had a developer bar in Opera that I could view the outline of the block elements, easily. I'll start playing with it and see. Nothing so far.
I'm getting quite frustrated trying to resolve this issue. Should I start posting some code. I have 388 lines of CSS code and 143 lines of HTML code. I have no idea what part is causing the problem. I've played with dimensions of the block elements and nothing seems to stop this page breaking. Suggestions or direction anyone? What should I post... here this is my HTML layout with content stripped to a point so I don't break any rules :-).
<div id="container">
<div id="header">
</div>
<div id="navbar">
<div class="searchbox">
<form action="" method="post">
<fieldset>
<legend>Legend</legend>
<label for="searchbox"></label>
<input type="text" name="searchbox" id="searchbox" size="11" maxlength="60" />
<input type="submit" name="nBtSubmit" value="Search" class="submit" />
</fieldset>
</form>
</div>
<div class="navigationmenu1">
<p>
<a href="">Française</a>
<a href="">Contact Us</a>
<a href="">Site Map</a>
<a href="">Rep Login</a>
</p>
</div>
</div>
<div id="navigationmenu2">
<p>
<a href="#" onclick="setActiveStyleSheet('default'); return false;">change style #1</a><span class="dot">·</span>
<a href="#" onclick="setActiveStyleSheet('funky'); return false;">change style #2</a>
</p>
</div>
<div id="content">
<div id="bluebox">
<div id="section1" class="box">
<h3>Product Name Here</h3>
<div class="box2">
<div class="inlineImageCenter"><img src="images/productimage.jpg" width="276" height="129" alt="product name - front view" /></div>
<p>
Product description here
</p>
</div>
</div>
<div id="section3" class="box">
<h3>General Overview</h3>
<div class="box2">
<table cellspacing="2" cellpadding="3" border="0" width="100%">
<tr class="even">
<td>
Airflow
</td>
<td>
1200 - 2800 cfm (566 - 1322 l/s)
</td>
</tr>
<tr class="odd">
<td>
Effectiveness
</td>
<td>
<a href="venmar/products/unitary/aridata/ERW-42-4-A-X.pdf">ARI Certification Data</a>
</td>
</tr>
<tr class="even">
<td>
Dimensions<br />l x w x h (approx.)
</td>
<td>
91" x 49" x 30" (2311mm x 1245mm x 762mm)
</td>
</tr>
<tr class="odd">
<td>
Technology
</td>
<td>
<a href="">Enthalpy Wheel</a>
</td>
</tr>
<tr class="even">
<td>
Type
</td>
<td>
Internal
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="redbox">
<div id="litmenu" class="box">
<h3>Related Literature</h3>
<div class="box2litmenu">
<a href="" id="selected">General Overview</a><span class="dot">·</span>
<a href="">Features, Functions, Benefits</a><span class="dot">·</span>
<a href="">Application Use</a><span class="dot">·</span>
<a href="">Geographical Use</a><span class="dot">·</span>
<a href="">Technical Specifications</a><span class="dot">·</span>
<a href="">Accessories and Options</a><span class="dot">·</span>
<a href="">Product Data Manual</a><span class="dot">·</span>
<a href="">Install Manual</a><span class="dot">·</span>
<a href="">Guide Specs</a><span class="dot">·</span>
<a href="">Case Studies</a><span class="dot">·</span>
<a href="">Wiring Schematic</a><span class="dot">·</span>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="contact">
<p>
Telephone: <br />
E-Mail:
</p>
</div>
<div class="copyright">
<p>
<a href="">Copyright</a> © company name<br />
<a href="">Privacy Policy</a> ¦ <a href="">Terms of Service</a>
</p>
</div>
</div>
</div>
