?
Solved

CSS - a img border none

Posted on 2007-11-26
14
Medium Priority
?
1,470 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
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.

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Suggested Courses

777 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