Probelm with fixed div and border images

  • HawkDawg
  • Newbie
  • Newbie
  • HawkDawg
  • Posts: 7
  • Loc: Georgia - USA

Post 3+ Months Ago

Howdy Folks-
New guy here at the forums and was hoping I could get a little advice.
I'm trying to set up a fixed menu block with rounded corners and it works well except for one minor issue, as seen in the screenshot.

Image

Here's the html code I used;
Code: [ Select ]
<div class="menu">
<img src="img/top.jpg" width="150" height="28" alt="Top Border" />
<h4>Navigation</h4>
<p><a href="acw/acw.html">Acworth</a></p>
<img src="img/bottom.jpg" width="150" height="28" alt="Bottom Border" />
</div>
  1. <div class="menu">
  2. <img src="img/top.jpg" width="150" height="28" alt="Top Border" />
  3. <h4>Navigation</h4>
  4. <p><a href="acw/acw.html">Acworth</a></p>
  5. <img src="img/bottom.jpg" width="150" height="28" alt="Bottom Border" />
  6. </div>


and here's the css (external stylesheet);

Code: [ Select ]
.menu {
background-image: url(../img/left.jpg);
background-repeat: repeat-y;
width: 150px;
background-color: #D4D4D4;
text-align: center;
position: absolute;
position: fixed;
margin-top: 100px;
z-index: 1;
font-size: 16px;
}
  1. .menu {
  2. background-image: url(../img/left.jpg);
  3. background-repeat: repeat-y;
  4. width: 150px;
  5. background-color: #D4D4D4;
  6. text-align: center;
  7. position: absolute;
  8. position: fixed;
  9. margin-top: 100px;
  10. z-index: 1;
  11. font-size: 16px;
  12. }


Here's a link to the page itself.

http://hawks-web.com/rev/index.html

Can anyone see why that bar is showing up under the menu box? It appears to be a small section of the 'left.jpg' used as the background image.

I've gone over the css and html numerous times and I can't figure out what's causing it. :?

Any advice would be greatly appreciated.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I believe this a simple matter of bracketing your HTML.

Instead of..
Code: [ Select ]
<img src="bottom.jpg" width="150" height="28" alt="Bottom Border" />
    </div>
  1. <img src="bottom.jpg" width="150" height="28" alt="Bottom Border" />
  2.     </div>


try...
Code: [ Select ]
<img src="bottom.jpg" width="150" height="28" alt="Bottom Border" /></div>


As a matter of habit, practice, course, I never break the line for closing tags unless the element is acting as a container...
Code: [ Select ]
<div class="menu">
        <img src="top.jpg" width="150" height="28" alt="Top Border" />
        <h4>Navigation</h4>
        <ul class="ul2">
            <li class="li2"><a href="page1.html">Enter</a></li>
            <li><a href="acw.html">Enter</a></li></ul>
        <img src="bottom.jpg" width="150" height="28" alt="Bottom Border" /></div>
  1. <div class="menu">
  2.         <img src="top.jpg" width="150" height="28" alt="Top Border" />
  3.         <h4>Navigation</h4>
  4.         <ul class="ul2">
  5.             <li class="li2"><a href="page1.html">Enter</a></li>
  6.             <li><a href="acw.html">Enter</a></li></ul>
  7.         <img src="bottom.jpg" width="150" height="28" alt="Bottom Border" /></div>


I personally find it much easier to read that way, but it drives some people nuts. :)
  • HawkDawg
  • Newbie
  • Newbie
  • HawkDawg
  • Posts: 7
  • Loc: Georgia - USA

Post 3+ Months Ago

Thanks for your reply. Much appreciated. :)
I tried your advice and it worked, but only in IE7. In Firefox that bar is still there. Not sure about IE6 yet.
That may narrow it down to something in the css now. I'll look through that and compare it with the IE css sheet and see if I can find the difference.

Edit 1: I just realized I'm working with a different version of the page that I gave a link too. As the code I showed uses the p tag and the linked page uses list. Let me get re-synced and try it with a list instead of p and see what I get.

Edit 2: Nope! Changing the p tag to a list didn't help in Firefox. Back to the drawing board. :cry:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Ahhh, in my test I only used your primary style sheet and eliminated the others.

Good luck!
  • HawkDawg
  • Newbie
  • Newbie
  • HawkDawg
  • Posts: 7
  • Loc: Georgia - USA

Post 3+ Months Ago

Well, the IE style sheet only covers the list code anyway so it shouldn't make a difference, as noted in the Edit 2 post above.
I guess the best thing to do is update the site with the same version I'm working with on my hard drive. :roll: :lol:
  • HawkDawg
  • Newbie
  • Newbie
  • HawkDawg
  • Posts: 7
  • Loc: Georgia - USA

Post 3+ Months Ago

OK! The site and hard drive are now working with the same versions. :lol:

Here's the complete css sheet.

Code: [ Select ]
.bd {
background-color: #C0C0C0;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}

img {
border-style: none;
}

.content {
width: 900px;
height: auto;
position: relative;
margin: auto;
}

.menu {
background-image: url(../img/left.jpg);
background-repeat: repeat-y;
width: 150px;
background-color: #D4D4D4;
text-align: center;
position: absolute;
position: fixed;
margin-top: 100px;
z-index: 1;
font-size: 16px;
}

.footer {
position: absolute;
top: 101%;
left: 34%;
}

.main_body {
float: right;
position: relative;
border-style: solid;
border-width: 2px;
border-color: #000000;
width: 748px;
background-color: #D4D4D4;
}

h1 {
text-align: center;
font-size: 26px;
color: #800000;
}

h2 {
color: #4040FF;
text-align: center;
margin-top: 30px auto -15px auto;
}

h3 {
font-size: 24px;
color: #4040FF;
text-align: center;
}

h4 {
margin-top: -7px;
}

h5 {
text-align: center;
font-size: 18px;
color: #4040FF;
margin-top: -25px;
}

p {
margin: 20px 30px 20px 30px;
line-height: 1.25em;
}

.p1 {
text-align: center;
}

.p2 {
text-align: center;
color: #800000;
font-size: 13px;
}

.p3 {
margin: 5px;
}

ul {
margin: 10px auto auto 50px;
color: #800000;
font-size: 18px;
}

.ul2 {
list-style-type: none;
margin: 0 0 5px -50px;
font-size: 18px;
}

.li2 {
margin: 0 0 10px 0;
}

em {
font-style: italic;
color: #0000C0;
}

address {
text-align: center;
margin: -15px 0 10px 0;
font-size: 14px;
}

a:link { color: #0000FF; text-decoration: underline; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
a:visited { color: #008000; text-decoration: underline; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
a:hover { color: #FF0000; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; }

.b1 a:link { color: #C00000; text-decoration: underline; font-size: 24px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.b1 a:visited { color: #800080; text-decoration: underline; font-size: 24px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.b1 a:hover { color: #00FFFF; font-size: 24px; font-family: Verdana, Arial, Helvetica, sans-serif; }
  1. .bd {
  2. background-color: #C0C0C0;
  3. font-family: Arial, Verdana, Helvetica, sans-serif;
  4. font-size: 18px;
  5. font-weight: bold;
  6. }
  7. img {
  8. border-style: none;
  9. }
  10. .content {
  11. width: 900px;
  12. height: auto;
  13. position: relative;
  14. margin: auto;
  15. }
  16. .menu {
  17. background-image: url(../img/left.jpg);
  18. background-repeat: repeat-y;
  19. width: 150px;
  20. background-color: #D4D4D4;
  21. text-align: center;
  22. position: absolute;
  23. position: fixed;
  24. margin-top: 100px;
  25. z-index: 1;
  26. font-size: 16px;
  27. }
  28. .footer {
  29. position: absolute;
  30. top: 101%;
  31. left: 34%;
  32. }
  33. .main_body {
  34. float: right;
  35. position: relative;
  36. border-style: solid;
  37. border-width: 2px;
  38. border-color: #000000;
  39. width: 748px;
  40. background-color: #D4D4D4;
  41. }
  42. h1 {
  43. text-align: center;
  44. font-size: 26px;
  45. color: #800000;
  46. }
  47. h2 {
  48. color: #4040FF;
  49. text-align: center;
  50. margin-top: 30px auto -15px auto;
  51. }
  52. h3 {
  53. font-size: 24px;
  54. color: #4040FF;
  55. text-align: center;
  56. }
  57. h4 {
  58. margin-top: -7px;
  59. }
  60. h5 {
  61. text-align: center;
  62. font-size: 18px;
  63. color: #4040FF;
  64. margin-top: -25px;
  65. }
  66. p {
  67. margin: 20px 30px 20px 30px;
  68. line-height: 1.25em;
  69. }
  70. .p1 {
  71. text-align: center;
  72. }
  73. .p2 {
  74. text-align: center;
  75. color: #800000;
  76. font-size: 13px;
  77. }
  78. .p3 {
  79. margin: 5px;
  80. }
  81. ul {
  82. margin: 10px auto auto 50px;
  83. color: #800000;
  84. font-size: 18px;
  85. }
  86. .ul2 {
  87. list-style-type: none;
  88. margin: 0 0 5px -50px;
  89. font-size: 18px;
  90. }
  91. .li2 {
  92. margin: 0 0 10px 0;
  93. }
  94. em {
  95. font-style: italic;
  96. color: #0000C0;
  97. }
  98. address {
  99. text-align: center;
  100. margin: -15px 0 10px 0;
  101. font-size: 14px;
  102. }
  103. a:link { color: #0000FF; text-decoration: underline; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
  104. a:visited { color: #008000; text-decoration: underline; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
  105. a:hover { color: #FF0000; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
  106. .b1 a:link { color: #C00000; text-decoration: underline; font-size: 24px; font-family: Verdana, Arial, Helvetica, sans-serif; }
  107. .b1 a:visited { color: #800080; text-decoration: underline; font-size: 24px; font-family: Verdana, Arial, Helvetica, sans-serif; }
  108. .b1 a:hover { color: #00FFFF; font-size: 24px; font-family: Verdana, Arial, Helvetica, sans-serif; }


And this is the complete IE css sheet.

Code: [ Select ]
ul {
margin: 10px auto auto 80px;
}

.ul2 {
list-style-type: none;
margin: auto;
font-size: 18px;
}
  1. ul {
  2. margin: 10px auto auto 80px;
  3. }
  4. .ul2 {
  5. list-style-type: none;
  6. margin: auto;
  7. font-size: 18px;
  8. }


I just can't see anything that would cause that bar in Firefox and not in IE now. Maybe I just can't see the forest for the trees. :lol:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Are you still using the same markup? The markup in the link above?
  • HawkDawg
  • Newbie
  • Newbie
  • HawkDawg
  • Posts: 7
  • Loc: Georgia - USA

Post 3+ Months Ago

I updated the page at the link above with the current page(s) I'm working with, if that's what you mean. :)
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Ok, I was able to resolve this in IE7 and Opera by removing the inline IMG elements and replacing them with block DIVs using your JPGs as backgrounds...
Code: [ Select ]
<div class="menu">
        <div style="background:url(top.jpg);width:150px;height:28px;"> &nbsp; </div>
        <h4>Navigation</h4>
        <ul class="ul2">
            <li class="li2"><a href="page1.html">Enter</a></li>
            <li><a href="acw.html">Enter</a></li></ul>
        <div style="background:url(bottom.jpg);width:150px;height:28px;"> &nbsp; </div></div>
  1. <div class="menu">
  2.         <div style="background:url(top.jpg);width:150px;height:28px;"> &nbsp; </div>
  3.         <h4>Navigation</h4>
  4.         <ul class="ul2">
  5.             <li class="li2"><a href="page1.html">Enter</a></li>
  6.             <li><a href="acw.html">Enter</a></li></ul>
  7.         <div style="background:url(bottom.jpg);width:150px;height:28px;"> &nbsp; </div></div>
  • HawkDawg
  • Newbie
  • Newbie
  • HawkDawg
  • Posts: 7
  • Loc: Georgia - USA

Post 3+ Months Ago

Thank you. I'll give that a try. :)
  • HawkDawg
  • Newbie
  • Newbie
  • HawkDawg
  • Posts: 7
  • Loc: Georgia - USA

Post 3+ Months Ago

:banana: YeHaaa!

That did the trick. :D

Thank you ever so much. :beerchug:
Now I can continue working on that site to get it ready to go live. :thumbsup:

I never would have guessed it was something so simple. :roll:

Next time you're in Georgia I'll buy you a beer. :drink:

Man there's a lot of smilies at this site. :lol:

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 81 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.