Solved

CSS - a img border none

Posted on 2007-11-26
14
1,457 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How can I expand text with explaination 5 30
Fixed div within Bootstrap carousel item 11 53
Help position a graphic properly via CSS 4 23
jquery add something to a div 4 37
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

939 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now