|
CSS - Can't Understand Why This Div Isn't Flush In Ie
HI guys
I'm basically ultra confused as to why a particular div in my layout won't line up on the following page.. http://hcl.uk.com/test/instaffs/enews1/ I'm talking about the orange box on the right hand side. As you can see, in Firefox it sits right against the line above it, yet in IE 6 theres a 4 or 5 pixel gap forcing the box down. I have been through both my CSS and markup and still can't figure out why this happening.. the only thing I can think of is that it's an IE bug that I don't know about. If anyone can take a look and give me some pointers on what it might or could be that would be great. Thanks in advance for all your help. Stu Similar TutorialsHi Um basically I have 2 divs inside in another main layout div, and basically i cant get them to sit to there is no space between them in IE, in firefox its fine. if you go here and open it in firefox then IE you'll see what i mean, any ideas? Html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html> <head> <title>lost layout test</title> <link rel="stylesheet" type="text/css" href="layout.css" /> </head> <body> <div id="outerBox"> <div id="topBox"> <div id="leftTop">left part1</div> <div id="rightTop">right part1</div> </div> </div> </body> </html> CSS: (not all is used in this example) Code:
body {
background: url("images/grad_bg.jpg");
background-color: #d53e3e;
background-repeat: repeat-x;
text-align: center;
}
#outerBox {
width: 700px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color: purple;
padding: 0px;
margin-top: 0px;
border: 0px;
}
#topBox {
width: 700px;
height: 200px;
color: white;
text-align: left;
padding: 0px;
margin: 0px;
background-color: green;
border: 0px;
}
#leftTop {
width: 500px;
height: 200px;
background-color: pink;
padding: 0px;
margin: 0px;
float:left;
border: 0px;
}
#rightTop {
height: 200px;
margin-left: 500px;
background-color: orange;
padding: 0px;
border: 0px;
}
#bodyBox {
width: 700px;
height: 540px;
color: red;
background-color: blue;
float:left;
text-align:left;
}
#leftContent {
width: 500px;
height: 540px;
background-color: blue;
}
#rightContent {
width: 200px;
height: 540px;
background-color: grey;
float:right;
}
#footBox {
height: 60px;
width: 700px;
color: red;
text-align: left;
background-color: black;
float:right;
}
Hello.This should be simple enough. I have an image on my page(image1.bmp),immediatly folowed by a table(class=table1). The thing is I want the image to be flush with the top of the table with no gap,but there is a small gap,How can I fix this? Thanks note(I left a //here mark on the html page where the problem is. css sheet: Code:
#menu {
clear: both;
margin: 30px;
padding: 0;
background: url(menu.jpg) repeat-y center top;
font: 12px/26px Courier New;
height: 26px;
background: #006633;
text-align: center;
}
#menu ul {
float: none;
list-style: none;
margin-top:0; padding: 0;
margin-right:0; padding: 0;
margin-bottom:0; padding: 0;
margin-left:90; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: inline;
float: 0 auto;
padding-top: 8px;
padding-right: 28px;
padding-bottom: 8px;
padding-left:8px;
color: gold;
text-decoration: none;
}
#menu ul li a:hover {
background-color:003300;
color: gold;
}
#menu ul li#current a {
background-color: #eee;
color: #333;
}
a { color: black;font-size: 10pt; text-decoration: none;
border-bottom-style: solid; border-bottom-width: 0px }
a:link { border-bottom-color: navyblue }
a:visited { border-bottom-color: purple }
a:hover { border-bottom-color: green }
a:active { border-bottom-color: red }
H1.texter {
font-family: 'Lucida Console';
font-size: 15pt;
color: #black;
font-variant: normal;
text-decoration: none;
}
H1.texter2 {
font-size: 14px;
color: #black;
font-family: 'Lucida Console';
font-variant:normal;
FONT-WEIGHT: normal;
}
H1.texter3 {
font-family: 'Lucida Console';
font-size: 10pt;
FONT-WEIGHT: normal;
color: navyblue;
text-decoration: none;
}
TABLE.Table1
{
height: 150px;
width: 380px;
top-border-style:hidden;
border-top:hidden;
border-bottom:solid;
border-left:solid;
border-right:solid;
border-color: #000000;
background-color:white;
border-width: 1px;
margin: 0px;
padding: 0px ;
}
TABLE.Table2
{ margin: 0px;
padding: 0px;
height: 199px;
width: 430px;
background-color:limegreen;
}
html sheet: Code:
<html>
<head>
<title>Keep track and review golf scores</title>
<meta name="description" content="Keep track of and review golf scores"/>
<meta name="keywords" content="Golf","records","review","tabulation"/>
<meta name="robots" content="index" />
<link rel="stylesheet" type="text/css" href="style.css" title="BlueSky 3.0
CSS"></head><body>
<style>
body
{
background-color: limegreen;
<font FACE="Lucida Console">
}
H1.texter1 {
font-family: 'H1.texter2 {
font-family: 'Lucida Sans Unicode';
font-size: 75pt;
color: black;
FONT-WEIGHT: normal;
font-variant:Not Set;
}
</style>
</head>
<body>
<div id="menu">
<ul align="center">
<li><a
href="golfgame/Users/register.php">Join</a></li>
<li><a
href="golfgame/Users/Log_in.php">Login</a></li>
<li><a href="golfgame/Users/help/tour.html"
>Tour</a></li>
<li><a href="golfgame/Users/contact.php">Contact</a></li>
</ul>
</div>
<br>
<IMG SRC="green4.bmp" align="left">
<IMG SRC="green4.bmp" align="right">
<br>
<center>
<table width=300><tr><td align='left'><IMG SRC="golf.bmp">
</td ><td align='center'>
<IMG SRC="golf.bmp">
</td><td align='right'>
<IMG SRC="golf.bmp">
</td></tr></table>
</center>
<br><br><center>
<IMG SRC="logo.bmp" align="center">
</center>
<br><center>
<IMG SRC="image1.bmp">
//here
<table class=table1>
<tr><td align='left'><br>
<h1 class=texter2><li>content here
scores!</li></h1></td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
</table>
</center>
</body></html>
Hi, This might be a case of an easy fix thats being over-looked but I've tried everything I haven't been able to find to 'fix' this. FF is cool, IE is giving me 'teh gap' I have attached an image, I highlighted the pic so it shows the black bar of space right under the top image. There are two DIVs that are 'stacked' The top one has the top half of the image, the bottom one has the gold bar as a background image, with the bottom half of the pic in it. I can't make the images the background of the div because i'm adding a rollover and link to the images. So, CSS: Code: #interior_top_image{
text-align:center;
vertical-align:bottom;
display:block;
height:85px;
margin:0px;
padding:0px;
}
#interior_header{
background-image:url("images/interior_bottom.jpg");
background-position:bottom center;
background-repeat:no-repeat;
background-color:#263F7F;
display:block;
height:85px;
text-align:center;
margin:0px;
padding:0px;
}
HTML: Code: <div id="interior_top_image"><img src="images/cross_top.jpg" name="cross_top" border="0"></div> <div id="interior_header"><img src="images/cross_bottom.jpg" name="cross_bottom" border="0"></div> Not strictly css but css may be the solution :-) I have created a sample page where you can see the problem: http://www.virtual-league.com/demo/ I want the images to sit flush above one another. If I take the text out of any of the lines then the images on those lines will join up nicely. Any ideas? Good day, I'm hoping to have this content right up against the top of the browser window. I've played around with padding values, but they don't seem to do anything and I'm unsure of what to try next. Any advice appreciated. Code: #sectionHeader {
width: 800px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
Code: <body> <div id="sectionHeader"> <img src="images/header.jpg" alt="Welecome to Doctor Martin's Site" width="800" height="321" border="1" /> </div> </body> I want to center my site, which I have found I can do by giving an absolute position to the main content area - but I also want to repeat an image in the background behind the main content, and I cannot do the both and prevent some empty white space at the top of the page. Can you help? (I am new at this.) What am I doing wrong? So, to recap: I want a centered site, an image behind the main content area, and no empty white space in the browser above my bg image. I am currently using IE (7). TIA. #body { margin: 0px; padding: 0px 10px 0px 10px; width: 100%; background: #ff9900 url('bg_repeat.jpg') repeat-x; } #container { top: 0px; left: 0px; padding: 0px 10px 10px 10px; margin: 0 auto; --> this will center my site, but I still cannot see the bg image stated in the body div border-right: #ffff99 solid 1px; border-left: #ffff00 solid 1px; background: #fff; width: 75%; } I would like to align left images so that they touch against each other. Here is a capture of my problem. dollhedz.com/test [CODE] <style type="text/css"> body{ background-color:#000033; color:#00cc33; } #wrapper{ background-color:#000000; margin:15px auto 0px; width:700px; height:800px; } #sitenav{ background-image:url(sitegrax/sitenavback.jpg); background-repeat: no-repeat; height:55px; padding-left:213px; border: 0px; margin:0px; text-align:left; } #one{ float:left; text-align:left; align:left; margin:0px; padding:0px; } </style> </head> <body> <div id="wrapper"> <div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" /> </div> <div id="sitenav" > <div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a> <a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a> <a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div> </div> </div> </body> </code> Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image. thank you for your time http://www.tonglebeak.com/test.html Why in the world does IE completely mess up the hover effects on the anchor tag whenever first-letter is being applied to the tag? View the source, save and remove the first-letter section, watch hovering work in IE then, etc.., I don't care, I'd just like to know what hack can be applied to make IE work here. okay, so i was trying to accomplish the same thing as the website www.alistapart.com I wanted the same thing for the links up at the top, i achieved this by looking at this websites CSS file. this was teh relevant CSS code: PHP Code: #menu UL { BORDER-TOP-WIDTH: 0px; CLEAR: left; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px } #menu UL LI { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center } #menu UL LI A { PADDING-RIGHT: 0px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: x-small; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 10px; BORDER-LEFT: #ccc 1px solid; WIDTH: 118px; COLOR: #c30; LINE-HEIGHT: 2em; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; BORDER-RIGHT-STYLE: none; LETTER-SPACING: 1px; HEIGHT: 2em; TEXT-ALIGN: center; TEXT-DECORATION: none; voice-family: inherit; } lol so it accomplishes what im looking for but i don't understand WHY it does this. Any help would be great! thanks. I just started trying to use CSS and I wanted to use a div layout instead of a table layout. The problem I'm having is that the separate divs don't want to sit one on top of the other. They like to have gaps. What do I need to change. I have been looking everywhere. Code:
.color1 {background-color: #411063;}
.color1 a:link {color: #CC9900;}
.color1 a:visited {color: #FFFFFF;}
.color1 a:active {color: #FFFFFF;}
.color1 a:hover {color: #FFFFFF; text-decoration: none;}
.color2 {background-color: #B39FC2;}
.color2 a:link {color: #CC9900;}
.color2 a:visited {color: #FFFFFF;}
.color2 a:active {color: #FFFFFF;}
.color2 a:hover {color: #FFFFFF; text-decoration: none;}
.color3 {background-color: #E6E8EE;}
.color3 a:link {color: #CC9900;}
.color3 a:visited {color: #FFFFFF;}
.color3 a:active {color: #FFFFFF;}
.color3 a:hover {color: #FFFFFF; text-decoration: none;}
body
{
text-align: center;
}
div#document_border
{
margin-right: auto;
margin-left: auto;
padding: 2px;
width: 762px;
background-color: #FFFFFF;
}
Code:
<html>
<head>
<title>Print Shop Template</title>
<link rel="stylesheet" type="text/css" href="print_shop.css"></link>
</head>
<body class="color1">
<div id="document_border">
<div id="title" class="color2">
<h1>McKendree Print Shop</h1>
</div>
<div id="header" class="color1">
<a href="template.html">Links</a>
</div>
<div id="content" class="color3">
<!-- Content Start -->
<p>Template Content</p>
<!-- Content End -->
</div>
<div id="footer" class="color1">
<a href="template.html">Links</a>
</div>
<div id="footer_spacer" class="color2">
<p> </p>
</div>
</div>
</body>
</html>
Hi, I was learning CSS and it didn't quite explain what the second img does. Code:
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
Also on some sites i noticed it would have more than one tag: Code:
div.img img img img img {}
or Code:
div div div div {}
if you could help, thank you I'm trying to get my head round these ... A) .search input, .search .commonButton { margin-right: 7px; vertical-align: middle; } I know what the style parts do, but I don't understand what the first two lines are doing. I think the second line is saying to apply the style to all .commonButton classes within a .search class ??? Don't know about the first. -------------------------------------- B) .buttons div { white-space: nowrap; } does this mean the style is applied to any div elements within the .buttons class? Can someone please help me understand float! I want the layout as shown on the picture. What is wrong in my HTML/CSS code? [img]picture.gif[/img] Code: <body> <div id="container"> <div id="heading">heading</div> <div id="picture"><img src="" /></div> <div id="description">description</div> <div id="b1">b1</div> <div id="b2">b2</div> <div id="b3">b3</div> <div id="foot">foot</div> </div> </body> Code:
div {
border:1px solid silver;
}
#container {
width:300px;
}
#heading {
}
#picture {
float:left;
width:200px;
height:200px;
}
#description {
float:left;
width:100px;
}
#b1 {
float:left;
width:50px;
}
#b2 {
float:left;
width:50px;
}
#b3 {
float:left;
width:50px;
}
#foot {
}
Hi, I'm trying to understand background image use on digg.com. I have Firefox and web developer plugin fired up and looking at the css for the navigation. The link "all" for example has digg[dot]com/img/menu-current.gif image as background, but there's not much positioning in the css... I don't understand how they use this image portions.. Can someone explain? Thanks! Hello! I am learning CSS on my own which is an authentic crusade So i decided to start with blogs since i have one of my own and i want to give it a personal look. I decided to download some blog templates available in the web to open and see how they work, somehow i managed to understand what i wanted but there are somethings that i don't understand. I decided to stick with this blog template but i came to realize that it doesn't show correctly in IE, the side bar color doesn't show and the font size is bigger. I wonder why that happens...can someone tell me? Quote: http:// nicetobehere-btemplates.blogspot.com/ And since the code is too big to post here you can download it from here Quote: http:// btemplates.com/2009/01/16/nice-to-be-here/ I will apreciate very much if you can help me with this!! Hello, i have a very strange problem with css. I want to build a horizontal menu, like tabs. Here is the link of my site. (sorry, its in russian) http://eai.w2o.ru/default.aspx Now you can see red border around the header div. When in layout.css, I remove the border, the header div changes its position (goes down). (in IE and FF (in FF is a little better)) Can you tell me what is my mistake? How can I do the same without that border? Thank you very much! Hi, Im trying to make the orange column fixed width but it doesnt work, when I change the width of the browser window it still changes width. Here is the link: http://www.i3design.com/test/ Here is the CSS: Code:
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.hidden { display: none; }
body { color: white; margin: 0; padding: 0; } /* Edited by Goldworker */
div.padded { display: block; }
div.content { width: 75%; margin: 0% 12.5%; } /* Added by Goldworker */
div.login { background-color: black; padding: 0% 12.5%; } /* Edited by Goldworker */
div.logo { background-color: grey; height: 50px; padding: 0% 12.5%; } /* Edited by Goldworker */
div.subnavigation { background-color: brown; }
div.main { color: black; background-color: orange; padding-left: 0px; padding-right: 0px; }
div.main div.body { background-color: white; min-width: 75%; }
div.main div.advertisements { width: 250px; display: inline; margin-right: 0px; }
div.footer { background-color: grey; }
Can anyone help. Also, is this well coded, or is it inefficient? James |
|||||||