|
CSS - Strange Margin Bug In Ie 6 & 7
I have a strange css bug in IE 6 and 7 while making a simple two column structure.
In firefox both the left and the right columns are top aligned properly but in IE the right column has around 15px of space on top of it. I can't seem to figure out why this space is coming. This seems like the IE peekaboo bug but can't be fixed using the line-height hack. Instead giving the IE proprietary ZOOM property to the UL we can fix this bug in IE. But I want to know is there any other method to fix this issue which uses valid css. Doctype for the HTML is xHTML transitional Here is the css code. #gdsrView{width:456px;} #gdsrView .srchGrpMod{} #gdsrView .grpResHdr{} #gdsrView .grpPagination{} #gdsrView .srCnt{clear:both;float:none;} #gdsrView .srCnt ul{list-style-type:none;margin:0;padding:0;} #gdsrView .srCnt ul#lstView li{clear:both;float:none;border-bottom:1px solid green;padding-bottom:5px;} #gdsrView .srCnt ul#lstView .grpPic{width:75px;height:75px;overflow:hidden;float:left;} #gdsrView .srCnt ul#lstView .grpInfo{background:#cacaca;margin-left:83px;} #gdsrView .srCnt ul#lstView dl.grpMLnk{font-size:1.1em;} #gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt{display:inline;} #gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt a.actLnk{font-size:0.8em;} #gdsrView .srCnt ul#lstView .grpInfo .grpDes{font-size:1em;} #gdsrView .srCnt ul#lstView .grpInfo .tStamp{font-size:0.9em;} #gdsrView .clearFl{margin-top:1px;} HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <head> <title>IE bug</title> </head> <body> <div id="gdsrView"> <div class="srchGrpMod"></div> <div class="grpResHdr"></div> <div class="grpPagination"></div> <!-- Begin: group results list view --> <div class="srCnt"> <ul id="lstView"> <li style="background:red;zoom:100%;"> <div class="grpPic"> <img src="../images/pic.jpg" alt="Group Image" width="75" height="75" /> </div> <div class="grpInfo"> <dl class="grpMLnk"> <dt><a href="#">Lorem Ipsum dolor amet consectectuer...</a></dt> <dt><a class="actLnk" href="#">Request Invitation</a></dt> </dl> <p class="grpDes">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec mattis urna eget magna. Nam cursus ipsum sit amet.lorem. Vestibulum ante ipsum primis in faucibus orci luc..</p> <p class="tStamp">Updated 55 Minutes ago</p> </div> <div class="clearFl"></div> </li> </ul> </div> <!-- End: group results list view --> </div> </body> Similar TutorialsWell strange on IE 5.2 for mac (I am assuming others are ficked too) I have a div in which I want to put paragraphs in... Code:
<html>
<head>
<style type="text/css">
#midRight {
position:relative;
top:20px;
left:160px;
width:550px;
padding:0px;
margin:0px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="midRight">
<p>line1</p>
<p>line2</p>
<p>line3</p>
<p>line4</p>
<p>line5</p>
</div>
</body>
</html>
Everything works fine on firefox (as one would expect) but on IE the first paragraph displays fine (at the left edge of the DIV) but all the rest indent themselves to the right by 160px (or whatever I change the left:xx px; of the div to. This is bizzare! I cant work out why the first one would be fine but all the rest indented. Anybody know how I can fix this? (so IE looks like this) Code:
line 1
line2
line3
line4
line5
etc Hello there. I'm afraid I can't provide a live example because it's a complicated commission that hasn't yet been published, but I'll try to be as specific and detailed as possible. My overall aim: To have a squarish div on the left hand side and a few short rectangular divs vertically stacked on the right hand side of a container. The container is a div whose width is known. The stacked rectangles must have a minimum width but there is some margin for error. All these divs are separated by margins. Code: OOOO === OOOO OOOO === OOOO OOOO === There are other, unrelated blocks above and below this arrangement, and there are blocks nested within these divs as well, all unrelated though. So how did I implement this? I figured this was simple enough: Code: <div> ... <div class="left-square">...</div> <div class="right-short-rectangle">...</div> <div class="right-short-rectangle">...</div> <div class="right-short-rectangle">...</div> ... </div> And the CSS would then look something like this: Code:
.left-square {
width: 100px;
height: ...px;
float: left;
}
.right-short-rectangle {
margin-left: 110px;
margin-bottom: 5px;
height: ...px;
}
So, this works just fine in Firefox and Internet Explorer. However, for some reason, Chrome doesn't like it. What Chrome does is, it completely ignores the margin on the right-short-rectangles, placing them underneath the floating left-square, but giving them the correct width (the width of the container minus the margin). By fooling around with the DOM inspector, I discovered that if I remove the margin attribute from one of the rectangles, they show correctly (in Chrome). However, they obviously will break in Firefox and Internet Explorer if I do that. Also, if I remove the float attribute from the square, Chrome suddenly recognizes the margins of the rectangles properly (when it no longer matters). So, does anyone have any idea about what's going on here? EDIT: I just noticed this and it is certainly relevant: The right-short-rectangles contain a few *unstyled* divs and one div that is floated to the RIGHT (in other words, content I want to have on the right hand side of each of these rectangles). Without this inner, right-floated div, the margin issue no longer happens in Chrome. The inner div is, however, essential. What can I do? Use tables? Weird issue with FF ive noticed can anyone explain why this happens? I have two divs, header and nav. Nav is inside header. Now when I placed a list inside nav it pushed my header div down abit maybe 15px. However when I added the following rule... Code: #nav ul{
margin-top:0px;
}
The error goes away. Strange isnt it? Heres my html and css 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=utf-8" />
<title>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="nav,5,5,false,false,0,0";
//-->
</script>
</head>
<body>
<div id="header">
<div id="nav">
<ul>
<li>Home</li>
<li>Browse</li>
</ul>
</div>
</div>
<div id="content">
<h1 id="mainheader">Latest Templates</h1>
<h1 class="sideheader">List One Title</h1>
<h1 id="latesttemplates">Heres the latest templates</h1>
<ul class="sidebarlist">
<li>list one</li>
<li>list two</li>
<li>list three</li>
<li>list four</li>
<li>list five</li>
</ul>
<h1 class="sideheader" style="top:150px">List One Title</h1>
<ul class="sidebarlist" style="top:175px;">
<li>list one</li>
<li>list two</li>
<li>list three</li>
<li>list four</li>
<li>list five</li>
</ul>
<div id="templateholder" class="toprow" style="left:20px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:20px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template1name</td>
</tr>
<tr>
<td class="descrip">Added</td>
<td class="answer">template1date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template1type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template1images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:185px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:185px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template2name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template2date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template2type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template2images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:350px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:350px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template3name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template3date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template3type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template3images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:515px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:515px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template4name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template4date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template4type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template4images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:20px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:20px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template5name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template5date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template5type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template5images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:185px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:185px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template6name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template6date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template6type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template6images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:350px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:350px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template7name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template7date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template7type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template7images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:515px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:515px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template8name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template8date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template8type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template8images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
}
#nav{
position:relative;
height:35px;
background-color:#3d3d66;
width:405px;
left:55%;
top:65px;
}
#nav li{
display:inline;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-right:10px;
}
#nav ul{
margin-top:0px;
padding-top:8px;
}
#header{
height:100px;
background-color:#333333;
background-image: url(../images/jpegs/header.jpg);
background-repeat:repeat-x;
}
#content{
position:relative;
margin-top:50px;
margin-left:auto;
margin-right:auto;
height:500px;
width:974px
}
h1#mainheader{
margin-top:0px;
padding-bottom:2px;
border-bottom:dotted;
border-bottom-width:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width:70%;
}
.sideheader{
position:absolute;
margin-top:9px;
top:0px;
left:75%;
padding-bottom:2px;
border-bottom:dotted;
border-bottom-width:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width:25%;
}
h1#latesttemplates{
position:absolute;
margin-top:0px;
padding-top:50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border-right:dotted;
border-right-width:1px;
width:72.7%;
height:105%;
top:0;
}
.sidebarlist{
position:absolute;
margin-top:9px;
top:25px;
left:695px;
}
.sidebarlist li{
list-style-image:none;
list-style-type:none;
}
#templateholder{
position:absolute;
height:105px;
width:140px;
border:solid 1px;
}
.toprow{
top:100px;
}
.bottomrow{
top:330px;
}
.descriptoprow{
top:215px;
}
.descripbtmrow{
top:445px;
}
#templatedescript{
position:absolute;
width:140px;
height:105px;
}
#templatedescript table{
width:140px;
}
.descrip{
text-align:left;
font-weight:bold;
font-size:12px;
}
.answer{
text-align:right;
font-size:12px;
}
.P{
color:#FF0000;
text-decoration:underline;
font:Arial, Helvetica, sans-serif;
font-size:12px;
border-right:1px solid;
border-right-color:#FF0000;
margin-left:12%;
padding-right:5px;
}
.D{
color:#FF0000;
text-decoration:underline;
font:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left:5%
}
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;
}
Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh Hi there, I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though. I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG. Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me. Any ideas? Thomas I have learned a lesson, To look in F.F as well as I.E6 to make sure all layout is showing as it should be, it is to a point. I had three errors when I looked in validator. Learned also yesterday that there is also CSS validator heaven forbid. I had this random image script that shows all images in posts. The link colors are what were different in F.F. Right color iin I.E. I have took that out now because when it showed images from the posts and the sidebar randomly the image over shot the sidebar when it shows both same images as the script found the posted images. I may have the answer to that by another random image to pull from a directory instead. On the F.F last year I had a site that had 100 errors lol so I wanted to check everything as I go this time around. If anyone has Opera please could they check out my Wordpress please? My link is in my profile as I saw yesterday there are rules about links with good reason. S how come the border was different color in F.F thats my question? Thanks! i have the following CSS Code:
#logoOuter{
width:155px;
height:90px;
background-color:#336699;
position:relative;
float:left;
}
#logo{
bottom:0px;
position:absolute;
}
html>body #logo{
margin-bottom:-5px;
}
#globalNavOuter{
margin-left:155px;
background-color:#00CC99;
}
#globalNavTop{
height:19px;
}
#globalNavBottom{
height:71px;
}
and this XHTML Code: <div id="header" > <div id="logoOuter"> <div id="logo"> <img src="images/logo.gif" border="0" /> </div> </div> <div id="globalNavOuter"> <div id="globalNavTop">globla Nav Top</div> <div id="globalNavBottom">global nav bottom</div> </div> </div> The problem is there was a 5px gap at the bottom of the image in moz/FF and in IE when i took the whitespace out (the CR's) of the html the space went away in IE bot not MOZ/FF so i added a -5px margin to the bottom of that div and that did the trick in FF but it over did it in IE thus the sub selector > hack. [EDIT] I just took the image away and that fixes it. So it looks like it's the image causing it. doing a - vertical alignment seems to fix it but I still dont understand why... Gary perhaps you can explain this to me...i just dont get it Some days tables just seem so much easier........ http://www.wwu.edu/~swing/newswingsite/index.html I'm relatively new at this, but I've been trying my hardest to learn how to do all of this while conforming to web standards. I've got my page looking almost (see below) like I want it to in Firefox, but in IE I get these ugly gaps. I used to get them in the inset box too, but I figured out a way to make them go away. I can't figure out how to make it go away in the header though. So my questions, so that I can actually learn something here, are these: What causes that big gap? How do I get rid of it? Is there a better/cleaner/simpler way to style the inset box so as to avoid the gaps? Also, you can see that there's one pixel missing in the gold border. That's from the blue top border so as to blend the rounded top border gif. Is there an easier way to add the rounded top? When I simply had no top border, things got screwy. Thank's for any help/insight you can give! The situation is very simple. Just test the following code in IE7 or Mozilla, and then in IE6. You will note that in IE6 there's a gap below the two divs. HOw can I fix this ? Code: <style>
.fontBold,.fontBoldLink{ font-family:tahoma; font-size:14px; font-weight:bold; color:#333333;}
.fontTitle { font-size:16px;}
.fontBoldLink { text-decoration:underline; cursor:pointer;}
</style>
<div style="overflow:auto; margin-top:20px; margin-bottom:0px; border:0px #000000 solid">
<div class="fontBold" style="width:150px; float:left; text-align:center; padding-top:3px; border:1px #999999 dashed ; border-bottom:0px; background-color:#EFEFEF; height:20px;">Left Padding</div>
<div class="fontBoldLink" style="float:right;padding-left:20px; background-repeat:no-repeat">Right Padding</div>
</div>
<div style=" background-color:#EFEFEF; clear:both; border:1px #999999 dashed; padding:10px; height:60px; margin-bottom:10px; margin-top:0px "></div>
Hi all, Please see http://www.jaysonsgroup.com/ztest/ntc/zcontact.html It's full of tests, but here's the problem.. The "Do you need more than one NTC Card" text at the bottom, needs to be followed by the text "(To share the Modem with friends)?*" IMMEDIATELY below it... Unfortunately, in IE, there is a spacing problem - see the link below for 2 screenshots for what I mean: http://www.jaysonsgroup.com/ztest/ntc/zie.gif The code is simple: Code: <div class="fieldname_long">Do you need more than one NTC Card</div> <div class="fieldvalue">(input field will come here)</div> <div class='spacer_1px'> </div> <div class='fieldname_text'>(To share the Modem with friends)?*</div> The CSS: Code:
.spacer_1px {
clear: both;
height: 1px;
overflow:hidden;
background: blue;
}
.fieldvalue {
float: left;
background: #ccc;
display: inline;
margin: 0;
}
.fieldname_long {
float: left;
width: 120px;
line-height: 13px;
padding-right: 15px;
color: #B30000;
font-weight: bold;
background: #eee;
display: inline;
margin: 0;
}
.fieldname_text {
color: #B30000;
font-weight: bold;
}
Note - I justr added "display:inline" and "margin:0" above to 'fieldname_long' and 'fieldvalue' but it doesn't fix anything in IE In the test link above, you can see that the blue line is the spacer_1px and that line should be touching the fieldname_long (light grey box). This happens in Firefox. But in IE, there's a gap which I need to remove. Sorry this is a really small thing but I just can't figure it out! Any ideas? Many thanks! now, i'm posting this after i've scoured the forum here and i have yet to find a posted resolution. The problem i'm having is pushing the footer to the bottom of the page, as opposed to the bottom of the window. The #footer is as follows: Code: #footer {
position: absolute;
bottom: 0px;
(border/font/background/padding properties)
width: 310px;
margin-top: 8px;
clear: both;
}
you can view the full style sheet here. if the page has enough information to push past the window height, teh footer remains at the bottom of the window, and is placed on top of the stacking order. The strangest part is that if you scroll, the footer scrolls with the page. To see what i'm talking about, go to the page and try resizing the window. Hi. I have noticed a strange behavior with my CSS and I cannot figure out a way to fix it. I have some css to override the body tag style. It sets the font family and size. I need to do this. However, when I use the font-size in the body, it adds extra pixels to a set of span tags that I use. (see attached picture). Here is my code. Does anyone know how I can include the font-size in the body, but not have that extra space in my div tags? Note: the sample image contains images on the edge of the tabs, but their presence has no effect on the issue. Also, this is for IE 6 on Windows. Thanks, Dave Code:
<html>
<head>
<style>
body
{
font-family: Tahoma,Verdana,Arial,sans-serif;
font-size:11px; /* with this line, extra space appears */
}
.tab_off
{
height:17px;
overflow:hidden;
cursor:hand;
}
.tab_off_text
{
background:#ACA899;
height:15px;
font-size:10px;
border-top:1px solid #aaaaaa;
border-bottom:1px solid #ECECEC;
padding-left:4px;
padding-right:4px;
vertical-align:middle;
}
.tabbed_panel
{
background:#ECE9D8;
border-left:1px solid #666666;
border-bottom:1px solid #666666;
border-right:1px solid #666666;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div id="pnlTabs">
<span class="tab_off">
<span class="tab_off_text">Tab One</span>
</span>
</div>
<div id="pnlContent" class="tabbed_panel"></div>
</body>
</html>
HI all, I've a problem. When my page is on hard drive it works fine. When I upload it to server, some characters screw up, such as three dots in a row.. and other punctuation. Take a look at the popup: http://www.mustsh.com.cn/testingdim.html Also.. any suggestions? My design is fairly whack.. I have a DIV on my page with the style 'bottom' applied to it. It is coloured red so you can see it. I would like it at the bottom outside of all the other divs/containers. The DIV with the red background should be at the very bottom of the page, under the large DIV. This is the HTML placing it on the page: HTML Code: Code: <!-- InstanceEndEditable --></div> <div class="bottom">bottom</div> </body> You can see it is the last DIV on the page. Yes I am using Dreamweaver templates. Here is the CSS for the bottom class: Code: Code: .bottom {
margin: 0px;
padding: 0px;
background-color: red;
border: 0px solid #999999;
height: 20px;
width: 100%;
}
It appres in different places on different pages. 'bottom' DIV at the top of the page: http://www.jfwebdesign.co.uk/photog/ 'bottom' DIV almost at the bottom of the page: http://www.jfwebdesign.co.uk/photog/about.php 'bottom' DIV at the top of the page: http://www.jfwebdesign.co.uk/photog/work.php 'bottom' DIV at the top of the page: http://www.jfwebdesign.co.uk/photog/contact.php Here is a link to the CSS file: http://www.jfwebdesign.co.uk/photog/styles.css Can anyone explain why? Many thanks. I have been tearing my hair out trying to figure out what is causing this artifact. I am assuming that it's a rendering issue with IE6, but wanted to ask here to see if anyone can think of what is causing it. Here is a screenshot: http://www.chimericdream.com/downloads/indexv_v35_ie6_bug.jpg And here is the HTML/CSS markup for that part of the page: HTML Code: <div id="findHelp"> <h3 id="findHelpHeader">Find the help you need!</h3> <form id="findHelpForm" action="" method="post"> <fieldset> <label for="subject">Subject</label><br /> <select name="subject" id="subject"> <option value="">Search all subjects</option> </select> </fieldset> <fieldset> <label for="grade">Grade</label><br /> <select name="grade" id="grade"> <option value="">Search all grades</option> </select> </fieldset> <fieldset> <label for="type">Type of help</label><br /> <select name="type" id="type"> <option value="">Search all types</option> </select> </fieldset> <fieldset id="last"> <br /><input type="submit" value="" id="findSubmit" /> </fieldset> </form> <!-- #findHelpForm --> <div id="featuredTeachers"> <h3>Featured Teachers</h3> <div class="teacherBox"> <img src="images/photo_Lisa.jpg" alt="Lisa Yang" /><br /> Lisa Yang <img src="images/browseWidget_btnPromo.png" alt="Button" /><br /> <strong>Advanced Chemistry Prep</strong><br /> <small>9th grade - 12th grade</small><br /> <img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /> </div> <!-- .teacherBox --> <div class="teacherBox"> <img src="images/photo_Drew.jpg" alt="Drew Hamlin" /><br /> Drew Hamlin <img src="images/browseWidget_btnPromo.png" alt="Button" /><br /> <strong>Proper CSS/HTML Coding</strong><br /> <small>College</small><br /> <img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /> </div> <!-- .teacherBox --> <div class="teacherBox"> <img src="images/photo_Joey.jpg" alt="Joey Flynn" /><br /> Joey Flynn <img src="images/browseWidget_btnPromo.png" alt="Button" /><br /> <strong>Natural Sciences Overview</strong><br /> <small>6th grade - 8th grade</small><br /> <img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /> </div> <!-- .teacherBox --> <p><a href="#">See more teachers</a></p> </div> <!-- #featuredTeachers --> <div id="adobePlayer"> <h4>We've got something better for you.</h4> <p>For an interactive search experience, please download Adobe Flash Player.</p> <a href="#"><img src="images/browseWidget_btnGetFlash.gif" alt="Get Adobe Flash Player" /></a> </div> <!-- #adobePlayer --> </div> <!-- #findHelp --> CSS Code:
#findHelp {width: 743px; height: 313px; background: #fff url('images/browseWidget_background.png') top left no-repeat; position: relative; margin-bottom: 1em;}
#findHelp #findHelpHeader {position: absolute; top: 15px; left: 25px; font-size: 1.3em;}
#findHelpForm {position: absolute; top: 45px; left: 25px; width: 718px;}
#findHelpForm fieldset {float: left; width: 27%; margin-right: 10px;}
#findHelpForm fieldset label {font-weight: bold;}
#findHelpForm fieldset select {width: 100%; border-width: 1px; border-style: inset;}
#findHelpForm fieldset#last {width: 10%;}
#findSubmit {width: 88px; height: 23px; background: #fff url('images/browseWidget_btnSearch.gif') top left no-repeat;}
#featuredTeachers {position: absolute; bottom: 35px; left: 20px;}
#featuredTeachers p {position: absolute; bottom: -20px; right: 15px; font-size: 90%;}
.teacherBox {width: 175px; float: left; text-align: center;}
#findHelp #adobePlayer {width: 150px; position: absolute; bottom: 30px; right: 20px;}
#findHelp #adobePlayer h4, #findHelp #adobePlayer p {color: #777; margin-bottom: 1em;}
#findHelp #adobePlayer p {font-size: 85%;}
Any help would be greatly appreciated. Hi, i have just noticed a very strange cross browser issue. On several of my sites, i have applied simple css styling to my select boxes / drop down menus... some of this styling has been simply changing the color of the text in the drop down menu. The styling is fine in IE7+, FF (PC), Opera (PC), Chrome (PC), FF (Mac), Safari (Mac), Opera (Mac) BUT NOT ON Chrome (Mac) I can't understand how you can't apply simple css such as text color to Chrome on a Mac Has anyone else noticed this or found a solution to this... thanks in advance for your help |
|||||||