|
CSS - Two Pixel Space In Ie Below Images In Inline <li>
As always, I am developing in Firefox and correcting for IE.
I have a strange problem I am unable to correct: I am getting a 2 pixel gap in the bottom of these images in I.E. 6, but they line up perfectly in Firefox.(See attached image) The only way I can get it to line up in IE 6 is to increase the image size by 2px, but it then overlaps in Firefox. Here is my corrosponding CSS: Code: ul.links {
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.links li {
background: #d4d4d4 url(/images/tabbg.gif) scroll top center repeat-y;
color: inherit;
display: inline;
margin: 0px;
padding: 0px;
}
ul.links li.current {
background: #d4d4d4 url(/images/currbg.gif) scroll top center repeat-y;
color: inherit;
display: inline;
margin: 0px;
padding: 0px;
}
Similar TutorialsI am working on a drupal site and I having problems getting some images in a block to display inline. I am able to effect some of the aspects of the images (they are list items in a ul) but I can't get them to display inline. Here is the html from the source: <div id="block-views-recent_images" class="block block-views"> <div class="blockinner"> <h2 class="title"> recent images </h2> <div class="content"> <div class='view view-recent-images'><div class='view-content view-content-recent-images'><div class="item-list"><ul><li><div class='view-item view-item-recent-images'><div class='view-field view-data-node-data-field-user-images-field-user-images-fid'><a href="/image-upload/admin/05-sep-2007/204"><img src="(xxxxxx) image_0.jpg" alt="" title="" /></a></div></div> </li><li><div class='view-item view-item-recent-images'><div class='view-field view-data-node-data-field-user-images-field-user-images-fid'><a href="/image-upload/admin/05-sep-2007/201"><img src="(xxxxxxx) image.jpg" alt="shack" title="some image" /></a></div></div> </li></ul></div></div><div class='more-link'><a href="/recent_images">more</a></div></div> And here is the css that I have attempted so far: #block-views-recent_images { background: #EBE9ED; } #block-views-recent_images li{ list-style-image: none; list-style-type: none; padding: 0; margin: 0; display: inline; } I am new to CSS so I know I may have taken a completely wrong approach. Thanks for any suggestions on how to get the images to display inline. Thanks Hello, I was wondering if anyone could shed some light on this problem I'm having with my navigation bar. I've Googled and tried every [seemingly] logical combination, but can't get it to work -- and it's driving me nuts! Basically, I have a div containing an unordered list and an image. The image is a non-semantic hack I've had to put in for the design, without making it massively complicated... Anyway, the problem is with the ul, which contains lis that are just images (tabs). Like so: Code: <div id="tabs">
<ul>
<li><a href="..."><img src="..."></a></li>
<li><a href="..."><img src="..."></a></li>
[etc.]
</ul>
<img src="filler.png">
</div>
Each image is a different width; and the above is simplified for clarity... Anyway, this works perfectly in Firefox, Opera and even IE. However, in Safari and Chrome, the lis have a few extra, blank pixels of padding on the right edge of the image; whereas I want all the images to butt-up against each other. My CSS is as follows: Code: #tabs {
word-spacing: -4px;
}
#tabs ul {
display: inline; list-style: none;
margin: 0px; padding: 0px;
}
#tabs li {
display: inline;
}
The word-spacing for the div removes the spacing you automatically get in Firefox/Opera/IE -- I found -4px was enough to remove the gap entirely -- but in Safari/Chrome, a gap remains. If you make the value even smaller (e.g. -5px, -60px, etc.) it makes no difference in any browser; if you make it bigger, then the gaps widen in all browsers. However, WebKit browsers always have that extra padding on the right edge. Any ideas on how to get rid of this?... I've tried "display: inline-block", "-webkit-border-horizontal-spacing" with various values, "white-space: nowrap"; even altering the HTML so that the images and lis have explicitly defined widths. Nothing works! Check out the below test page... In FF, i get a left margin of 5px, and a right margin of 10px as expected, but in IE6 i get a left margin of 10px, and a right margin of 20px. Anyone know why? If I absolute position with left:10px, and right:10px on the relevant boxes they are positioned correctly in IE6, so why don't the margins work? (Can't use absolute positioning as i require flow layout in my real-life page) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#leftnav{
width: 20%;
float: left;
clear: left;
margin-left: 5px;
border: solid 1px #000000;
}
#main{
width:76%;
float: right;
clear: right;
margin-right: 10px;
border: solid 1px #000000;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<div id="leftnav">
some text some text<br>
some text some text
</div>
<div id="main">
<p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
</div>
</body>
</html>
I have a site I am constructing in CSS. It looks good in most browsers, except one -- IE 6 PC. There is a gap between images (on the right top) and I can't figure out why http://www.arrivalband.com/test/ Here's the css code (the offending code seems to be in rightCOL). My guess this is something that is pretty usual with IE, but I don't know a good work around. Thanks for the help in advance. I am building this layout using strict xhtml and css. Now I run into a problem with the menu buttons. On Firefox they look just like they should. Though, Internet Explorer 6 adds an empty space between each button. See the example page and CSS. Basically, Internet Explorer adds that space under images. You can also see it under the header image. Any idea on how to fix it? I tried to add overflow: hidden; - it seemed to fix the issue with the header div, but did not make any effect in the list. Actually, in THIS case, as in the example page, I could make it without using images. Add text, borders and so on, which would probably fix the problem, but there are cases when I just want to use images. Both, Strict XHTML and CSS of the page are 100% valid. Thanks, Timo http://users.wpi.edu/~sigep/goron2.html How would I remove the space around the images in the navbar so that they are all right next to one another and line up properly on the page? I've been trying to solve this problem about my website. My site What it is suppose to look like. Image Thanks in advance. Hi everyone. I have a strange problem which get's on my nerves for a long time and it usually makes me keep on using tables instead of css. It has to do with floating images inside another div or td. I have, let's say, a td which contains 2 pictures. I want the first picture to be at the left side and the other one at the right leaving space in the middle. So I just have the following code: Code: <td class=top width="936" height="52"><img src="images/left.jpg" style={float:left;}><img src="images/right.jpg" style={float:right;}></td>
I also have declared the following in the style definition: Code: td.top {background:url(images/back.jpg) repeat;padding:0;margin:0;}
td.top img {padding:0;margin:0;}
So I test my page and although it appears ok on firefox a strange thing happens on Explorer. Both pictures leave some blank space on their side just like if I had added 2-3 pixels of side margin. It is even more annoying that the float:left img leaves a space on it's left side and the float:right img on it's right one. Notice that the table has both cellpadding and cellspacing set to 0. Thank you in advance for your time. PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! Hello, I am trying to create a 1 pixel width <tr width="1" style="width: 1px;"><td rowspan="8" width="1" style="width: 1px;"> </td></tr> and a 1 pixel height <tr height="1" style="height: 1px;"><td colspan="8" height="1" style="height: 1px;"> </td></tr> But the following methods are not working, instead it is making them bigger than expected. How can I accomplish this?? Is there some sort of clear method in CSS that will clear the height and width and make sure to set it to 1 pixel?? Thanks I've made this layout: http://superq.dk/skjoldborg It works fine in Firefox, but IE somehow has moved the content one pixel to the left. This shows to the right at the menu, where there is one pixel whitespace, and at the end of the text, to the right, the white content box moves one pixel out in the shadows. Can someone give me an explanation on this? I've checked it all over, sizes on divs and so one, and I've come to the conclusion that IE has moved the content one pixel to the left, but why? OK, so I know what the problem is, but I can't figure out how to fix it. This is what I'm doing. I've got a floated div (left) and another div sitting to it's right. I'm using Nifty Corners to get that nice rounded finish (without using four images). But, here's the problem, the JavaScript is designed (I guess) to only cap the size of the div defined in the css file, so when IE 6.0 generously adds an extra 3px, what am I supposed to do? Ask Google. So, I found the Holly Hack at Position Is Everything but haven't been able to implement it correctly. I've been tinkering with this new layout for about a fortnight, but with no luck. I seek enlightenment, if there is anyone with the wisdom . . . ? Files included a another 1 = html nifty = JScript all = css This page design works in: Mac - Safari 2.0.1, Opera 8.5, Firefox 1.0.7 Win - Firefox 1.5, Opera 8.51 The JavaScript doesn't work at all in Internet Explorer 5.2 for Mac, but degrades the way I think it should. And back to Windows, IE 6.0, the "3px jog" is the only problem. All help appreciated. Hey-- Working on a new site, I've got 99.9% of it finished and working, but a menu is displaying one pixel higher in Safari (Mac and PC) than any other browser. www.inkyfever.com/customer/animotion/ The menu is in the orange bar at the top. It's created with an unordered list. You can view source to check the code. HELP! EDIT: Okay, I've got it to mostly work by changing some padding, but hovering over any other orange links, the hover color doesn't quite fill the space vertially. ONE pixel short at the bottom. Ideas? :grimey I know this should probably be turend into pure css but for now I'm stuck with tables i have the following table structure Code: <table class="subitemtable"> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItemOn"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> </table> using the following css styles Code:
.subItemTable{
width:100%;
border-collapse: collapse;
margin:0px;
padding:0px;
}
.subItem{
margin:0px;
border-bottom: 1px solid #0E59AE;
border-right: 1px solid #0E59AE;
background-color:#e8e8e8;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItem a{
font-size: 9.5pt;
color: #666666;
}
.subItem a:link,.subItem a:visited{
text-decoration:none;
}
.subItem a:hover{
text-decoration:underline;
}
.subItemOn{
margin:0px;
border-right: 1px solid #fff;
border-bottom: 1px solid #0E59AE;
background-color:#ffffff;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItemOn a{
font-size: 9.5pt;
color: #666666;
}
.subItemOn a:link,.subItemOn a:visited{
text-decoration:none;
}
.subItemOn a:hover{
text-decoration:underline;
}
my problem is after the first cell the bottom right most pixel of the border is just missing. This happens in firefox and IE ..The attached picture should show what I'm talking about. Thanks for your help Hi, I'm trying to do a two column layout which spans across the whole screen. This would be easy if I was just using percentages because I could just go: Left: width:20%; Right: width:80%; But I need the left bar to be a fixed width and the right bar to span the rest of the screen. There might be something really simple here that I'm overlooking but at the minute I can't think of how I would do it... Joe The site http://glish.com/css/7.asp is showing me how to make tabls in css. I get it but their example which has a workour I don't get doesn;t work either.... look at the top right corner. I'm trying to learn but how can you with erroneous code? The code is all exposed on their page in the scroll down bit down the page a bit. Hello, I am developing a site for a client and originally I had the template stretching 100% height in the browser which worked for both IE and FF. The problem now is that I have integrated a shopping cart into the template and because of the system of the cart, it breaks the 100% rule of height. So now I have began to use the idea of creating a -y tiling centered bg image. The problem is that when I align the image to meet the edges of the template, the alignment is different between IE and FF by 1 pixel!!! Its so frustrating! Has anyone run across this issue before? I ran a quick search for this in google but didnt find anything helpful, only things with regular images. If anyone has a solution for this, it would be great! Thanks! Rproctor Hey all. I'm just starting out in web design. To make things even more complicated, I'm using CSS for my first ever website. So I'm building this website from scratch, using online tutorials and such. But I'm running into a problem. On a PC, everything displays perfectly in IE and Firefox. But on a Mac, the nav bar is stretched with dead space after the last list item. This is the same in Safari, Firefox, and IE for Mac. Would you guys give it a look and maybe help me around the issue? What I'd like is no dead space after the last list item on any computer, (if you're looking on a PC, it appears correct) and I want a fixed width. Site CSS Thanks. I searched the forum before posting but didn't find anything. This is a fairly straight-forward problem, but it's one that I can't find a solution to. The site I'm working on is centered in the window. The body has a 3600x1 pixel background image repeating vertically that is also centered in the window. The layout of the site depends on this background being in the right place. In every browser I've tested so far, the site layout lines up perfectly with the background image, and all is good. But in Firefox 1.5 and Firefox 2.0 (both on Mac), the centered container div sits one pixel to the right of where it should be. Is this a known bug with Firefox? I'm including the code for the body tag and the container div, even though a quick glance will show that it's pretty standard stuff: Code: body {
font: 12px/1.5 "Lucida Grande", Helvetica, Arial, sans-serif;
color: #363636;
background: url(body_bg.gif) top center repeat-y white;
text-align: center;
}
#container {
margin: 0 auto;
width: 720px;
text-align: left;
}
Any help at all would be terrific. Thanks. Note: I changed the title of this post in the hopes someone will help me. |
|||||||