|
CSS - Image Hover Margin Issue In Firefox
For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div:
Code: #content img {
margin:2px 5px 0px 0px;
}
#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}
#content a:hover img {
border:2px solid #ffffff;
}
This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them: Code:
.g2image_float_left {
display:block;
float:left;
}
.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}
Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them. Any ideas what is causing this? Thanks in advance. Similar TutorialsHello All, I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer. Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result. How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well? This is how the code is displayed in IE: http://img407.imageshack.us/img407/2360/pfieeu9.jpg Firefox/Safari/Chrome: http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg You can see the little extra "nubbin" of underline between the icon image and the text. CSS: Code:
a.red10ullink:link {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:visited {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:hover {color: #333333;
font-size: 10pt;
font-family: arial;}
img.icon {vertical-align: middle;
border-width: 0px;
margin: 0px 5px 0px 0px;}
HTML: Code: <a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a> Thanks! I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Having a weird effect in firefox in that it doesn't seem to respect the right margin correctly. What I am trying to do is line up text so that it flushes to an image that is to the right, but for some reason it pushes the image off the page. (floatWrap is a clearing div so <br style="clear: both"> is not needed) Code: Code:
<div class="floatWrap">
<div style="float: right;">
<img src='imageSrc'>
</div>
<div id="txtWrap" style="float; left;">
<div class="floatWrap">
<div style="float; right;">
Some text which should be right up on the picture and to the left of the title
</div>
<div style="float; left;">
Title which will never reach the text next to the picture
</div>
</div>
<div>
Text that will reach the picture but for some reason pushes it out of the way instead of wrapping to the next line.
</div>
</div>
</div>
#txtWrap is the div that wraps the entire contents to the left of the image. I want this to flush all the way up to the image but give a buffer of 5px. I tried setting #txtWrap {width: 100%; margin-right: 5px;} but it pushes the pic off the screen. I am assuming this b/c a scroll bar at the bottom of the browser appears I tried setting #txtWrap {margin-right: 5px;} but the text within keeps pushing farther to the right than it's supposed to, causing the whole wrap to push the to the next line. Where can I set the margin-right property so it displays correctly? Greetings, The following webpage works in firefox but not in ie: http://resonantprogramming.com/homen.html For some reason the menu does not show up correctly. I want the menu to show up within the top gradient graphic, but ie doesn't like that for some reason. I did alter the z-index value to no avail. Any ideas? Thanks Please look at itsjustmelive.com in both firefox and internet explorer. When you roll over the "service" button in Internet Explorer the entire page moves down. Not in firefox because I specified a height. How do I fix this in IE? Thanks! Bev I've built a website using only div's and I am only having problems with one of them... I have the div with a margin-left : 48px; In IE this aligns the div with a section of text above it (the result I had wanted) however in Firefox it displays about 20pixels to the left of the IE display. If I set the margin-left : 96px; it aligns properly in Firefox but is then messed up in IE. I have an attachment of my code its not very large. Is there any fix for this problem? Hello, I'm having a slight issue with what I belive to be margins. In IE half the logo is being cut off and in firefox I have a grey area above the menu bar that shouldn't be there. I have checked both my css and xhtml both validated fine with out any warnings. I'm pretty new to CSS and this is starting to annoy me =\. **WARNING** The site is political in nature. Links to the code: h**p://www [.] dncreform [.] com / t / css / main.css h**p://www [.] dncreform [.] com / t / Thank You, William Hi, First post on here! ...I have a problem with the default margin in IE being 1px less than Firefox. I've stripped my CSS down to be as naked as possible! It's quite frustrating as I'm quite experienced with CSS, I guess the small silly things do things like this when you've not been CSS'n for a few months! HTML:- Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> test </body> </html> CSS:- Code:
* { margin: 0; padding: 0; }
I have a menu that has no margins and I have a content box with has a margin-left of 79. Each menu item's length is 78 pixel, so I'd gradually guess that margin-left:78 would align the border of the menu item and the content box... Here's my problem. If I make it 78, it aligns in IE but not in Mozilla Firefox. When I make it 79, it aligns in Mozilla but not IE. Thanks in advance. on this page the image on the left that reads "Grade" is 10px from the side (where it should be) in IE... but in firefox, it isnt 10px from the side... but rather 0px... when i change the margin-right to 20px instead of 10px, it looks fine in Firefox, but 10px too far over in IE. any help would be GREAT thanks I've got an "IE" issue! This CSS code looks perfect in IE7 and Firefox. It is a photo box that offsets 225 pixels to the left of the text box. Code: #inside_offset_image {
width: 319px;
float: left;
margin-left: -225px;
margin-right: 30px;
margin-bottom: 30px;
}
But when I test in IE5.5 and IE6, this photo box runs almost completely off the left side of the browser. The actual test page is located he http://penncomm.com/bean/inside.html Any ideas? Hello, first post here =) I'm having a margin/border problem where it is showing up the way I want it to in IE but not in FF. Here is the URL: http://www.prj2501.com Here is the CSS: http://www.prj2501.com/puppetmaster.css DOCTYPE is XHTML-STRICT In IE you will notice the extra border below the nav followed by the padding for the content ID which places the H3 where I want it. In FF, the border and the padding are both gone. In trying to debug this, I notice nothing I do above the H3(padding,margin,etc.) takes effect in FF...yet left and right padding do. The only way to get it to move down is BR tags and I'd rather not do that. Any ideas, suggestions? I am just now getting the hang of CSS so if you see anything glaring that does not seem best-practice, by all means point it out. Thanks in advance. Please look at the main navigation on this site www.downtowntransmission.com I have it exactly how I want it in IE7 but it is a bit off in FF. Mouseover the Contact link and Gallery Link and you will see what I mean. Is there some small adjustment I can make to make it look the same in both? As a side note, do you like the site? T Hi all, I've been reading this forum for a while now, but never had to post anything before. I've hit a snag whilst working on my new personal site. Its all fine in Firefox, I'm using a Wordpress engine to spit out 'posts' which are actually folio items, however IE, after the first one, the second one and every one after that have some extreme margin/padding issue so that the content area is only maybe 20px wide. www dot lucas-starbuck dot com forwardslash design is the site address, any ideas would be much appreciated! Thanks, Lucas Take a look at http://actrucking.com/. I just added the orange link towards the middle of the page that says "Get a FREE Online Quote Now!!" I'd like to push it down a bit so it is more centered in the blue area, but I can't seem to get the text to acknowledge margin or padding? Here are what the styles look like: Code: #tlCallBox { background:#336799; height:75px; display:block; float:left; width:868px; margin-left:10px; position:relative; margin-bottom:30px}
#tlCallBox h2{ color:white; font-size:19px; margin: 15px 0 0 30px}
#tlCallBox p { color:White; margin-left:32px}
#tlCallBox b { margin:20px 0 0 120px; font-weight:bold; font-size:20pt}
Remove. This main navigation does not display properly in Safari and I was hoping somone might be able to tell me why http://hometown.tmhdesign.com Hi, I'm noticing a different behaviour between firefox and explorer regarding de margin attribute, and I can't explain it applying the well known box model difference. Here is the css code: Code: div#main {
margin: 10px auto 20px auto;
width: 1001px;
border: 1px solid #000000;
}
div#left {
float: left;
width: 150px;
}
div#content {
width: 600px;
margin-left: 160px;
background-color:#0033CC;
}
Here is the HTML: Code: <div id="main"> <div id="left">left</div> <div id="content">content</div> </div> What I get in firefox is the expected, the content div is exactly at 160px distance of the inner part of the main div border. However in explorer the distance is 163px?? According to the box model difference, if we consider that in explorer the width includes the border, the distance should be 161px but not 163px. Any ideas? Caste I've a menu bar that's a horizontally displayed list (i.e. set up with the following values: ul{ margin-top:5px; margin-bottom:5px; margin-left:0px; } li.inline { display:inline; padding-left:5px; padding-right:5px; border-left:1px solid #fff; } Contained in the following code: <div id="mainNav"> <UL> <li class="first"><a href="../about/index.html">About</a></li> <li class="inline"><a href="../contact/index.html">Contact</a></li> <li class="inline"><a href="../services/index.html">Services</a></li> <li class="inline"><a href="index.html">Portfolio</a></li> </UL> On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element. Is there a way to get both Firefox and IE to have no padding? Thanks </div> |
|||||||