Welcome to WebmasterWorld Guest from 34.235.143.190

Forum Moderators: not2easy

Message Too Old, No Replies

Opera issue, mouse hover style breaks page

Opera, page breaks on specific style property

     
5:13 pm on May 31, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0


Hi. Seems like Opera is becoming just as much a pain as IE <G>. But might be something I do though. Here's my issue...

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;
}
5:59 pm on May 31, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 15, 2004
posts:1300
votes: 0


try adding this to your a:link css

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.

3:16 pm on June 1, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0


I tried playing with the transparent property on a:hover but that didn't seem to help. It just hides the bottom border affect. Here's all the css code I have for the anchor. Is there something else I can do?


a
{
color: #0066B2;
text-decoration: none;
}

a:hover
{
color: #0066CC;
text-decoration: none;
background-color: #dde5f7;
border-bottom: 1px dashed #6185db;
}

3:35 pm on June 1, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Which Opera version is causing the problem?
4:03 pm on June 1, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0


Ops, sorry. The Opera that was causing this problem is version 7.23. I haven't installed 7.5 yet. I would assume the same problem would occur but hard to say.
5:32 pm on June 1, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 29, 2004
posts:70
votes: 0


Is this for the same layout you're asking about in the other thread? If so, try removing the change in background color and see what happens.

Adam

7:11 pm on June 1, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0


aeve
Yes the other post about the multiple styles is about the same page. I messed up on that post. I tried removing the background color on a:hover and didn't make a difference. The border must be causing in some fashion more space then what is provided. I'll have to tweak some dimension of the block element to be bigger I guess. Still confused as to why this would occur though.

Frustating....

7:23 pm on June 1, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 15, 2004
posts:1300
votes: 0


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.

9:19 pm on June 1, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0



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">&middot;</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">&middot;</span>
<a href="">Features, Functions, Benefits</a><span class="dot">&middot;</span>
<a href="">Application Use</a><span class="dot">&middot;</span>
<a href="">Geographical Use</a><span class="dot">&middot;</span>
<a href="">Technical Specifications</a><span class="dot">&middot;</span>
<a href="">Accessories and Options</a><span class="dot">&middot;</span>
<a href="">Product Data Manual</a><span class="dot">&middot;</span>
<a href="">Install Manual</a><span class="dot">&middot;</span>
<a href="">Guide Specs</a><span class="dot">&middot;</span>
<a href="">Case Studies</a><span class="dot">&middot;</span>
<a href="">Wiring Schematic</a><span class="dot">&middot;</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> &copy; company name<br />
<a href="">Privacy Policy</a> ¦ <a href="">Terms of Service</a>
</p>
</div>
</div>

</div>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members