• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1514
  • Last Modified:

CSS - a img border none

Hi - I'm down the path of css from tables and am having trouble getting rid of the border that appears on an image button in IE (FF fine).  Also the telephone text seems to bleed to the next line.  Any ideas as to what am I doing wrong?

Heres my code:
#topbar,
#topnav {
      float:left;
      width:584px;
      margin:0;
      padding:0;
      display:inline;
}
#topbar,
#topnav img,
#topnav .nav,
#topnav a {
      float:left;
      margin:0px;
      display:inline;
      border:none;
}
#top-nav-tel {
      float:left;
      margin:0;
      padding:0;
      display:inline;
      width:205px;
      height:28px;
      background:url(../images/telephone-bg.jpg) no-repeat;
}

And here's the html:
                  <div id="topnav">
                        <a class="nav" href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('top-menu-shop','','images/top-menu-shop-on.jpg',1);"><img name="top-menu-shop" src="images/top-menu-shop-off.jpg" width="87" height="28" border="0" id="top-menu-shop" alt="The Shop" /></a>
                        <a class="nav" href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('top-menu-basket','','images/top-menu-basket-on.jpg',1);"><img name="top-menu-basket" src="images/top-menu-basket-off.jpg" width="191" height="28" border="0" id="top-menu-basket" alt="Your shopping basket" /></a>
                        <a class="nav" href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('top-menu-checkout','','images/top-menu-checkout-on.jpg',1);"><img name="top-menu-checkout" src="images/top-menu-checkout-off.jpg" width="101" height="28" border="0" id="top-menu-checkout" alt="Checkout" /></a>
                        <div id="top-nav-tel">
                              <p><strong>Call us on</strong>0234 1567714</p>      
                              </div>
                  </div>

Thanks in advance,
Tony
0
Treder
Asked:
Treder
  • 6
  • 5
  • 2
  • +1
1 Solution
 
gops1Commented:
when you use float left, then use clear. So here clear the right section. Like this:

clear:right;
0
 
TrederAuthor Commented:
So in my case, where does this go?
0
 
Eternal_StudentCommented:
#topnav a img {border:none;}
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
TrederAuthor Commented:
Thanks for the input - that doesn't seem to have solved it:

http://www.thefoodfolk.com/our_boxes-family.html  (in IE)

I have changed the background colour of div #topnav to highlight problem.  I'm sure I have forgotten something simple - but cant see what!!
0
 
Eternal_StudentCommented:
Get rid of ALL HTML comments and try this in your css:

img{vertical-align:bottom;}
0
 
Eternal_StudentCommented:
Let me know how you get on?
0
 
TrederAuthor Commented:
you mean <!-- a comment --> ?  why would this matter?
0
 
Eternal_StudentCommented:
I think that may have something to do with your repeating text issue.
0
 
TrederAuthor Commented:
Hi
Putting img{vertical-align:bottom;} in the css has closed the gap in ie - thanks.

But sadly taking all comments out of html file has not changed the repeating text.
0
 
Eternal_StudentCommented:
Are you SURE it is not this:

http://www.webmasterworld.com/forum21/9261.htm
0
 
Eternal_StudentCommented:
It turns out that this duplicating characters bug can be triggered by other things than just HTML comments. Any elements given the style {display: none} will also induce the bug. In fact, even hidden inputs can do it, and presumably any other elements that don't actually display for some reason. Apparently the act of hiding a source element is the critical trigger for this bug.
0
 
gxp071Commented:
Your bug is only visible in ie6, had to dig out an virtual image to test on the browser.  add the code below to the head of the page after you style sheet to hide the problem.

<!--[if IE 6]>
#topnav {
overflow:hidden;
height:28px;
}
<![endif]-->

Open in new window

0
 
TrederAuthor Commented:
Don't you just love this game!  The -3px margin right did the trick.

Many thanks,
Tony
0
 
gxp071Commented:
sorry hit return before i finished the post.

find the full code below.  And agree with eternal its related to that ie6 comment bug even though you have already removed all the comments.

Hope it helps.
</script> -- Original Page
 
 
<!--[if IE 6]>
<style type="text/css">
<!--
#topnav {
    overflow:hidden;
    height:28px;
}
-->
</style>
<![endif]-->
 
</head> -- Original Page
<body>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now