Solved

CSS - a img border none

Posted on 2007-11-26
14
1,460 Views
Last Modified: 2008-02-01
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
Comment
Question by:Treder
  • 6
  • 5
  • 2
  • +1
14 Comments
 
LVL 17

Expert Comment

by:gops1
ID: 20349415
when you use float left, then use clear. So here clear the right section. Like this:

clear:right;
0
 

Author Comment

by:Treder
ID: 20349447
So in my case, where does this go?
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20349724
#topnav a img {border:none;}
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

Author Comment

by:Treder
ID: 20350073
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
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20350166
Get rid of ALL HTML comments and try this in your css:

img{vertical-align:bottom;}
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20350210
Let me know how you get on?
0
 

Author Comment

by:Treder
ID: 20350352
you mean <!-- a comment --> ?  why would this matter?
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20350447
I think that may have something to do with your repeating text issue.
0
 

Author Comment

by:Treder
ID: 20350631
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
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20350752
Are you SURE it is not this:

http://www.webmasterworld.com/forum21/9261.htm
0
 
LVL 18

Accepted Solution

by:
Eternal_Student earned 500 total points
ID: 20350841
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
 
LVL 6

Expert Comment

by:gxp071
ID: 20350874
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
 

Author Comment

by:Treder
ID: 20350915
Don't you just love this game!  The -3px margin right did the trick.

Many thanks,
Tony
0
 
LVL 6

Expert Comment

by:gxp071
ID: 20350949
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

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question