|
CSS - Floating Images Leaves Space On Explorer
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. Similar Tutorialsi am using display:none to hide two divs, but the space where they are located still remains... but only in firefox... here is a link... it happens when you click on one of the tabs at the bottom of the box... 15 Games thanks for any help. Hello, I need a little help... When moving an image over the top of another image it leaves a white space where the image was in the flow. How do I get the trailing content to flow into the space where the image was. Even though the image moves where I want, it still seems to occupy the space where it was? PHP Code: echo "<IMG SRC='http://www.golfleague.us/gifs/splash.gif' width='150' height='90' STYLE='position: relative; top: -133px; left: 380px; margin:0; z-index:1'>"; Thanks for your help. Hi, for reasons unknown my template is being displayed towards the far right of the browser in Internet Explorer...It works fine in Firefox (page is centered) but I am rather confused as to why it is being displayed so strangely in IE? Help would be appreciated. Site: www dot 21healthconsult dot com CSS: Code:
/* Generic Selectors */
div.wrapper {
height: 100%;
width: 950px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
background-color: #FFFFFF;
}
p {
width: 100%;
text-align: left;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: none;
color: #000000;
border-bottom: 1px solid #E0E0E0;
}
/**************** Pseudo classes ****************/
:link {
color: #0066FF;
text-decoration: none;
font-weight: none;
}
li {
list-style-type: disc;
line-height: 150%;
}
li :link {
color: #0066FF;
text-decoration: none;
font-weight: bold;
}
:visited {
color: #0066FF;
text-decoration: none;
font-weight: none;
}
li :visited {
color: #0066FF;
text-decoration: none;
font-weight: bold;
}
:hover {
color: #0066FF;
padding-bottom: 5px;
font-weight: none;
text-decoration: underline;
}
li :hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
:active {
color: #0066FF;
font-weight: none;
}
/************************* ID's *************************/
#header {
position: absolute;
width: 900px;
height: 50px;
margin: 0;
margin-top: 15px;
padding: 0 0 50px 50px; /*top right bottom left*/
text-align: left;
}
#t_navigation {
position: absolute;
z-index: 10;
width: 900px;
height: 50px;
margin: 0;
margin-top: 48px;
padding: 0 0 50px 300px; /*top right bottom left*/
font-weight: normal;
font-size: 11;
text-align: left;
}
#search_frame {
position: absolute;
z-index: 10;
margin: 0;
margin-top: 15px;
padding: 0 0 0 300px; /*top right bottom left*/
width: 600px;
}
#search_box {
background-color: #F0F0F0;
width: 600px;
height: 28px;
}
#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 0;
border: 0;
width: 569px;
background-color: #F0F0F0;
font-color: #000000;
}
#search_box #go {
width: 27px;
margin: 3px 4px 0 0;
font-color: #000000;
float: right;
}
#l_navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 80px;
padding: 0 0 50px 50px; /*top right bottom left*/
border-right: 1px solid #E0E0E0;
font-weight: normal;
text-align: left;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 50px 300px; /*top right bottom left*/
margin-top: 80px;
width: 900px;
text-align: left;
}
For some reason, when the image with the title of the page is two lines, in this case "Tax Service and Consultation" it bumps the content down in the div to the right, but only in IE and only if it is on two lines. I have an image illustrating what I mean but this awesome site won't let me post web addresses on it, WTF? I can send anyone a link to explain what I mean. The css and html validates. I cannot figure out what I am missing with this. Any help or suggestions will be greatly appreciated Thanks, Billy Maybe I should be posting this as a reply - this is an UPDATE: I used the WC3 Validator and it found an outright error in my code. So, gosh - ignore the posting below! And, uhm, I think I'll be using that handy-dandy WC3 tool more often.... ---------- Okay - I am a CSS dope - I've been using tables and antiquated code for a long time. I'm putting together a dummy site, just for testing, and I'm trying to postiion things with DIVs, etc. Be gentle - I'm 59, and, not that damned smart... I installed Dreamweaver and have been fooling with that as it has a lot of templates with proper CSS, tips, etc. But I've never used it before, so that's another learning curve. So, I have a page on which there are some DIVs and, in one, there is an extra space - and, an extra bottom border line - in Internet Explorer. I'm not fond of IE, but that isn't the point - a lot of people use it.....and I need to know why this is happening. Here's a link to an image of what it looks like in Explorer - the line at the bottom is absent in Firefox and Chrome: Screenshot The page is just the index page at: GuyMerritt.net The CSS files looks like this: Code: body {
margin: 0 0 0 0;
background: #FEFEEC;
height: 1000px;
background: #F9F9EE;
}
h2 {font-family: tahoma; font-size: 12px; font-weight: normal; padding-left: 5px; padding-right: 8px; color: #777772;}
#header {height: 220px; background: url(../images/header_graphics.jpg); }
#left-sidebar {
float:left;
width:20%;
padding-left: 20px;
}
#right-sidebar {
float:right;
width:20%;
padding-right: 20px;
}
#main-content {width: 54%;float: left;padding-top: 0px;
}
.sidebars-2 #content {
width: 54%;float: left;padding-top: 10px;
}
#box {
border-style: solid;
border-width: .05em;
font-family: arial;
color: #777772;
font-size: 13px;
padding-left: 9px;
padding-right: 9px;
}
img.example {
width: 100%;
max-width: 250px;
height: auto;
}
div#slides {
width: 500px;
height: 280px;
overflow: hidden;
}
div#slides div {
height: 280px;
width: 500px;
font-size: 100px;
line-height: 200px;
text-align: center;
color: #fff;
}
ul#ticker {
height: 1.4em;
overflow: hidden;
border: solid 1px #aaa;
background: #ccc;
}
ul#ticker li {
padding: 0.2em 0;
}
/* @group global */
p#links {
padding-top: 50px;
clear: both;
}
a#avatar {
position: absolute;
bottom: 10px;
right: 10px;
}
a#avatar img {
border: none;
}
h1 {
color: #0094d5;
}
a {
color: #0094d5;
}
a:visited, a:hover {
color: #00577e;
}
.red {
background: #e40053;
}
.blue {
background: #0094d5;
}
.green {
background: #43aa38;
}
/* @end */
At the rate I'm moving, I'll be dead before I ever figure this stuff all out! If anyone could explain what's causing this I would be very grateful. And why do so many things render differently in Explorer (from Chrome and Firefox)? Thanks again, Guy Merritt, Flint, MI In IE, this will produce the look that I'm looking for. The image and a couple of details are provided inside of a blue box. In FF, they overlap eachother. Not the text, just the image. How can I adjust my CSS? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
padding: 10px;
}
-->
</style>
</head>
<body>
<div class="fieldset"> 1: dfas <br />
<hr />
<img src="../../imageApp/images/smallrear.JPG"
width="160"
height="120"
border="0"
align=left hspace="12"/> etwrThis is an edit </div>
<div class="fieldset"> 2: <br />
<hr />
<img src="../../imageApp/images/small100_1737 (Small).JPG"
width="89"
height="120"
border="0"
align=right hspace="12"/> </div>
</body>
</html>
Gah. Internet Explorer is doing mighty funky things with my webpage. http://www.maths.tcd.ie/~icecube The floating images in the main posts work fine from firefox, but in the IE that I checked them out on, there are just blank spaces where the images/comments/bored should be - but even then you can still right click on the space where the image should be to save it and stuff. Anyone have any help/suggestions? I am at my wits end as I have tried and searched just about everywhere for some guidance. I'm currently changing my site to an entirely tableless markup. On the following page, I have an image floated right of my <ul> which is wrapped by a div with a dotted border on the top, right and bottom. When I float my image right, the bottom edge of my image runs below the bottom border of the div. This only happens in FF and NOT IE. Check out the following link: My problem Here is my xhtml markup: Code: <!-- Start Linear Template -->
<div class="contain">
<img src="/images/linearthumb.png" class="templatethumb" alt="Linear Template" />
<p>
Linear Template
</p>
<ul class="template">
<li><span class="rarr">→</span> Professional and sophisticated.</li>
<li><span class="rarr">→</span> Drop-down navigation menu.</li>
<li><span class="rarr">→</span> Information “boxed” for easy reading.</li>
<li><span class="rarr">→</span> Background can be “watermarked” with <br />
your logo or any color you wish.</li>
</ul>
</div>
<!-- End Linear Template -->
And here is my css for the div and image (forgive the roughness of it): Code:
div.contain {
padding-right: 5px;
margin-bottom: 10px;
border-top: 2px white dotted;
border-right: 2px white dotted;
border-bottom: 2px white dotted;
}
img.templatethumb {
float: right;
width: 168px;
height: 160px;
border: 2px outset #808080;
margin-top: 5px;
margin-right: 100px;
}
Hi, I have a series of divs, each of which contain some text and an image. The images are floated either left or write, so the text wraps around them. It works as intended in screen view, but when I try to print, the images lose their float in IE (the text no longer wraps around them). It works fine in FF. Any ideas? Thanks Hello I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help. What I'm trying to do All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify. NOTES The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px. I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse. Here is a print screen of the header: [IMG]URL[/IMG] Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message. The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now. CSS Code Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that. Code: #myHeader {width:auto;height:133px;
background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}
#myLogo {
float:left;
width:10%;
height:150px ;
margin-left:2.22%;
display:inline;
background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
#myConame {
width: 15.33%;
height:90px;
margin-left:auto;
margin-right:auto;
background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
#myBanner {
float:right;
width: 29.73%;
height:150px;
background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}
The HTML Code Code: <div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
<ul>
<li><a href="http://shuttermaster.co">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">About Me</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
</div>
<div style="clear: both;"></div>
I hope I have been clear enough. Hoping someone can point me the right direction. Regards, and thanks.... 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 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. 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;
}
I've been trying to solve this problem about my website. My site What it is suppose to look like. Image Thanks in advance. Safari 1.2.3 (or so) will display my multi-level CSS-driven menus/ The third-level is set to display with a background color over a text area with a different background. When the user clicks or mouses-off the third-level menu, there is about a 3px vertical remnant of that menu left on screen. What can I do to prevent this? Hey there, webbsdomain.com/Max I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there.... The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight. In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find. I researched the issue online and found similar issues: IE6 3px float bug and IE6 double margin bug Neither of which seem to be the issue, and the fixes they describe do not work. I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful! Thanks in advance, Brian |
|||||||