Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS - a img border none

Posted on 2007-11-26
14
Medium Priority
?
1,477 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

618 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