|
CSS - Empty Space Under Images In Ie
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 Similar Tutorialshttp://www.thegi.net/tree/retail.htm I'm taking a Photoshop layout and turning it into HTML for a friend of mine. I just started the HTML process and am having issues right off the bat. NOTE: Pardon the semi-complete markup, I like to make small HTML documents locally to get the pieces to line up correctly and then I merge it with the final document template once it works. If you look at the above link in FireFox you will see everything lines up correctly, but in IE 7 (and maybe other browsers, I haven't gone that far yet) you will see gaps below the top set of divs and above the bottom set of divs. I have tried setting the margins and padding to 0 with no luck. Any ideas? Edit before posting: ACK! I solved it in IE by adding a DOCTYPE. Guess quirks mode made it render stupid. Is there anything I should be aware of here regarding this issue? Any pointers or gotchas I should look out for? I am a hell of a PHP developer, CSS is my weak point =) EDIT AGAIN! I am also going to move the styles into an external sheet once I get it working. I have the following code. I realize some of you are going to cringe when you see the tables in the div tags. This application was completely tables a few months ago and I have nearly completed the switch to divs.. but this page is a generated page that is customizable and I haven't had the time to spend on converting it. unfortunately I cannot give a link to this page. I've believe I've slimmed this down to only the relevent code. The extra space occurs after the outerImageTable's content. If I set the outerImageTable's background color then the extra space also changes colors so it is part of the outerImageTable. note: There would actually be multiple instances of the innerImageTable each representing a tab. Code: <div id="content" class="ParentDivBrowse"> <div id="subContent" class="ChildDiv"> <div class="outerImageTable"> <div class="innerImageTable"> <img src="/XXXXYYYY/images/leftselected.bmp" /> <button class="XXXXTabSelected" tabindex='-1' type="submit" name="DLG1_T801_MAIN" value="0" onClick="buttonClick(this)"> Mainn </button> <img src="/XXXXYYYY/images/rightselected.bmp" /> </div> </div> <div style="float:left;"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td colspan='2' valign="middle"> <table class='XXXXDlgTable'> <tr> <td colspan="2" height="60%"></td> </tr> </table> </td> </tr> </table> <table class="XXXXActionTable"> <tr> <td class="XXXXActionTable"> <table class='XXXXActionWidthFix'> <tr align='center'> <td width='0'></td> <td align='center' class='ActionButtons'> <button title='Clear' onMouseOver="Clear_img.src='/XXXXYYYY/images/actions/shadow/action_clear.png'" onMouseOut="Clear_img.src='/XXXXYYYY/images/actions/plain/action_clear.png'" onClick='buttonClick(this)' id='button_Clear' name='Clear' tabindex='-1' value='Clear' type='submit'> <img vspace='0' width='16' height='16' name='Clear_img' src='/XXXXYYYY/images/actions/plain/action_clear.png'> Clear </button> </td> <td width='0'></td> </tr> </table> </td> </tr> </table> </div> </div> </div> Thanks if anyone can help me. CSS entrys Code:
.OmniTabSelected{
font-size: 12px;
font-family: avenir, arial;
color: white;
background-color: #826182;
border-top:1px solid;
border-bottom:1px solid;
border-top-color:black;
border-bottom-color:#826182;
border-left: 0px;
border-right: 0px;
height:19px;
vertical-align: top;
margin-right: -2px;
margin-left: -2px;
padding:0px;
padding-right:8px;
padding-left:8px;
padding-right:expression('2px');
padding-left:expression('2px');
}
.innerImageTable{
position: relative;
float: left;
cellspacing:0px;
cellpadding:0px;
border: 0px;
margin-top:-2px;
margin-top:expression('-4px');
white-space: nowrap;
vertical-align:;
}
.outerImageTable{
position: relative;
float:left;
cellspacing:0px;
cellpadding:0px;
border: 0px;
margin-top:2px;
margin-top:expression('4px');
}
.ParentDivBrowse {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
}
.ChildDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '837px' : '100%');
}
Hello. I have just finished migrating my vbulletin template to XHTML 1.1 strict and it validates just fine. The css shows 2 errors but they are known and have no effect on the display (effective for windows resizing). My question is why do I have ~500px of white space to the site of my http://forums.xedge.net ? I did a * { border: 1px solid red; } to see where the space lined up in the scheme of things and it looks like it's part of the main div (siteWrap). Code:
/* *** This wrapper sizes the appearance of the entire site *** */
div#siteWrap {
width: 95%;
min-width: 770px;
margin-left: auto;
margin-right: auto;
background-color: #606A8C;
}
siteWrap sets the page to render at 95% of the current window. I also have a div for contents which gives 15px to the left and right to give spacing for all following elements. In researching this problem I have read that percentage widths sometimes can be problematic with static paddings, but it was working at one time. I just can't figure out what I did wrong. The white space only appears in firefox, in ie and opera the site renders perfectly. Thanks. Thanks for taking the time to read my question I am starting to make a page, and for some reason I have a white space between two sections of my page. I don't know why. I don't have a domain for this page yet, so I've put it under my band domain. The space is between the Menu and the info portions of the page. Any ideas? http://www.pierced.ca/kelly/ css: Code:
@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
background-image: url(C:/Documents and Settings/McIntyBD.MAPLELEAF/Desktop/Kelly/images/fall-leaves.jpeg)
/*background-color: #d8d8d8;*/
}
#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}
#header {
width: 640px;
height: 100px;
color: #A6A6A6;
background-color: #b12514;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}
#footer {
width: 640px;
height: 20px;
background-color: #b12514;
color: #A6A6A6;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}
#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
height: 400px;
text-align: left;
text-transform: uppercase;
font-size: 20px;
background-color: #FD9800;
/*border-left: medium solid #E0E0E0;
border-right: medium solid #E0E0E0;
border-bottom: medium solid #E0E0E0;*/
padding: 8px;
line-height: 25px;
}
#menu a:visited {
color:aqua;
font-size: 12px;
width: 84;
}
#menu a:hover {
color:#005c00;
font-weight: bold;
font-size: 12px;
width: 84;
}
#Menu a {
color:yellow;
font-size: 12px;
width: 84;
}
#info {
background-color: #ffc047;
color: #005c00;
height: 400px;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
text-align: left;
font-size: 16px;
}
#info p {
text-indent: 12px;
font-family: ZapfChan MdIt BT;
letter-spacing: 4px;
line-height: 25px
}
a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-size: 12px;
}
a {
color:#A0E5FF;
font-size: 12px;
}
Hi I have a page that looks something like this Code:
<style>
#container {
border: solid 1px #000000;
width: 600px;
padding: 10px;
}
#banner {
height: 200px;
width: 600px;
background-color: #FF0000;
font: bold 20px Arial, Helvetica, sans-serif;
}
#layer {
position: relative;
top: -198px;
height: 196px;
width: 150px;
z-index: 1;
left: 2px;
background-color: #FFFFFF;
}
</style>
<div id="container">
<div id="banner">Hello</div>
<div id="layer">This is a layer</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
</div>
If you view that site, you will see that there is an empty space below the banner-div, which is reserved for the layer. I need to get rid of that empty space, in other words, I want the text to begin right after the banner-div. Any ideas how I can accomplish this? Using relative positioning for the text is not possible, because of the structure of the rest of the page (which I haven't pasted here). [edit] Floating the layer will work partially, the text will begin right below the layer, but there is still an empty space on the left side of the text - that has to go too. [/edit] All help is appreciated. Thank you in advance - Kimppa Check it out: http://www.wdoucette.com/awards/ Look at the part that looks like this: - link 1 - link 2 You can hover over the empy space after "link 1" and it clicks "link 1"! If I put a space before the "<br>" code after the link, the problem goes away. Know what causes it? (BTW, this is a site I'm creating for my father. It is unfinished.) Hi there, Not entirely sure this is a CSS issue, but something tells me it is... I'm getting a weird space at the top of my pages in IE, which consequently causes the header to not align properly with the header background image. It works just fine with FireFox though. You can view the issue he http://hsdc.groundedgroup.com/ Does anybody know how to remove this space? Thanks in advance. First off, I apologize if my explanation is bad. Also, please refer to the link below. You will have to delete from the spaces from the URL because I was not allowed to post a url since I am a new user :/ http://img240. imageshack. us/my.php?image=forumexplanationje5.jpg This is what I want to do... I want to make a "table" in css. I want to make the "table" always be 890px. The css for the orange items would be .orange { margin:0px; padding:20px; } Now, I want the width of the orange items to be the width of the text in them + the padding. So basically the width is going to be dependant on the text in the tag. My problem is that I don't know how to make the blue part fill up the rest of space without knowing what the width of the orange part is. Please help, thanks. 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. 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. this will be fun to explain, heres the code: Code:
<div Id="Panel_contain" style="background-color: #cdcdcd;">
<div Id="panel2" style="float:left">Blah</div>
<div id="panel3" style="float:left">Blah</div>
</div>
lets say that the two panels inside amount to 50px of size (just for mental visualization). In firefox, the background color of the outside div is the whole height of its div (itself) in IE6, the background only goes down, lets say 10 px and stops. From what i have got out of this, IE6 sees that div as empty? and so renders it wrong? basically i need to get the height of the div to extend. Advanced: All of this code is being generated by VB (its a dynamic AJAX program, where all the controls are built from info from a database) so i was thinking that adding some text below the inside divs would make it not 'empty', although i can't figure out how to append to the bottom of the div programmatically, because i dont know when the div is done being filled. If that makes sence outro: basically im pretty sure i should be able to fix this with some type of CSS IE6 bug fix. Thanks! Is this illegal? <div id="some_id"></div> Thank you Hi to all, I have a problem with an empty div. I have created an empty div as follows: Code: <div id="more"></div>Hello Now I set the height property of the empty div equals to 20px. On IE 7.0 it looks fine, with the hello under the empty div, however in FireFox and Opera Hello is being display nearly inside the empty div. What can i do to fix this and make it display always under the empty div? Thanks and Regards, Sim085 ps: I am using the Strick Doc Type. and I need the empty only to colour it in a different colour (for style that is). Hi, I need to apply a border on the bottom of an empty cell, but since IE6 does not support the empty-cells property, the border appears only on tiny part of the cell. Is there a workaround? I have already tried placing inside the cell but it doesn't work that way either. |
|||||||