|
CSS - Css Sub-menu Breaks In Ie, Worked Before, White Space/gaps In Ie, Need Help!
Similar TutorialsI have a page with some very large (dynamically populated) tables in an application. Is there a way to prevent these table from being pushed to a new page when printing? I don't care where the tables break, but what I am trying to avoid is a printed header and then a huge gaping whitespace on the 1st printed page and then the table , that should have been printed just below the header, on a new second page. Any thoughts? Thanks, Stephen Hey everyone, I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Any suggestions would be great. http://64.232.240.200/new.html This site works well in Mozilla. There are spacing discrepancies between loads with Mozilla and latest Internet Explorer. The space under headings in the Main section differs between them, and there are gaps in the newsboxes where the background image runs uninterrupted on Mozilla. Internet Explorer Mac v5 does horrible things as can be seen in <a href="http://64.232.240.200/mac_ie5_screen.jpg">this screenshot</a>. (Colors have been changed slightly since this screenshot was taken, but you get the idea.) Any help is appreciated. Hi; I am trying to get rid off white space from the bottom of the navigate bar, and tried with height=23px for th or td, but they don't not work, could anyone help me, please. 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>Yourheadstone.com</title>
<style type="text/css">
html head title{
border:0;
padding:0;
margin:0;
}
body{
padding:0;
border:0;
background-color:#3399FF;
margin:0;
}
table tr td{
border: 1px solid #000000;
}
table{
width:1024px;
height:25px;
padding:0;
border:2px solid #000000;
margin-top:5%;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
background-color: #E5FFFF;
}
tr td{
padding:0;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: right;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
</style>
</head>
<body>
<table>
<tr>
<td>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="uploadform.php">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Headstones</a></li>
<li><a href="#">Home</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Hi, I'm working on a site in Css and it all works fine in Firefox. But in IE7 there is a lot of extra white space between elements like after the h2 heads. Anyone know what i'm doing wrong? Here's the code. CSS Code:
body {
background: #1d1d1d url(../g/header_bg.gif);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
font-family:arial;
font-size:11px;
line-height:1;
font-weight: normal;
text-decoration: none;
color:#575859;
text-align: left;
}
#container {
width: 992px;
margin: 0px auto;
text-align: left;
}
ul {
list-style:none;
padding: 0px;
margin: 0px;
}
input, textarea{
font-family:Tahoma;
font-size:11px;
color:#000000;
vertical-align:middle;
font-weight:normal;
background:#FFFFFF;
text-align:left;
}
.formfield {
width:271px;
height:auto;
color:#000000;
background-color:#FFFFFF;
height:18px;
margin-right:8px;
border: solid 1px #404040;
}
#header {
height: 63px;
}
.menu {
float:left;
padding-top:25px;
}
.menu li {
background:url("../g/menu_sep.gif") right 3px no-repeat;
padding:0px 10px 0px 15px;
float:left;
}
.menu li a {
background:url("../g/menu_arrow.gif") 0 6px no-repeat;
color:#181818; font-weight:bold;
padding:0px 10px 0px 15px;
text-decoration:none;
}
.menu li a:hover {
text-decoration:underline;
}
.search {
float:right;
background:url("../g/search_bg.gif") 0 0 no-repeat;
width:357px;
height:43px;
padding:12px 0px 0px 10px;
margin-top:10px;
}
h1.logo {
width: 203px;
height: 109px;
background: url("../g/title.gif");
text-indent: -9999px;
margin-left: 10px;
}
#left_container {
float: left;
width: 200px;
background-color:#000000;
margin-right: 20px;
margin-left: 10px;
}
#middle_container {
float: left;
}
#right_container {
float: right;
}
.left_top {
width:200px;
height:12px;
font-size:0em;
background:url("../g/left_top_bg.gif");
}
.left_bottom {
width:200px;
height:12px;
font-size:0em;
background:url("../g/left_bottom_bg.gif");
}
#left_container h2 {
font-size:1.01em;
line-height:1.5;
color:#85B102;
font-weight:bold;
text-transform:uppercase;
padding:0px 0 10px 0;
margin-left:20px;
}
#left_container ul { margin-left:20px;}
#left_container li { font-size:1.01em; line-height:1.5em; color:#707070;}
#left_container li a { font-size:1.01em; line-height:1.5em; color:#707070; text-decoration:none; background:url("../g/arrow.gif") no-repeat 0px 6px; padding:0 0 0 19px;}
#left_container li a:hover { text-decoration:underline;}
HTML Code: <html>
<head>
<title>Test</title>
<link type="text/css" href="x/style.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<div id="header">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
</ul>
</div>
<div class="search">
<form method="get" action="search.php">
<input type="text" class="formfield" value=""><input class="submit" type="image" src="g/search.gif" value="submit">
</form>
</div>
</div>
<h1 class="logo">MyTitle</h1>
<div id="left_container">
<div class="left_top"></div>
<h2>Menu</h2>
<ul>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="home">Test2</a></li>
<li><a href="#" title="home">Test3</a></li>
<li><a href="#" title="home">Test4</a></li>
<li><a href="#" title="home">Test5</a></li>
<li><a href="#" title="home">Test6</a></li>
<li><a href="#" title="home">Test7</a></li>
</ul>
<div class="left_bottom"></div>
</div>
<div id="middle_container">
b
</div>
<div id="right_container">
c
</div>
</div>
</body>
</html>
Ok guys, I'm hoping someone can help me. I am a complete newbie to CSS and web site construction in general. I have a left vertical navigation bar made up of graphics in a div tag that is set to float on the left. I'm having difficulty with the graphics, they have white spaces in between them when viewed in IE. They are supposed to butt up against one another. I have tried setting the margin and padding in that div to 0. I have also seen in other forums where the <li> tag can be placed on the previous line to fix this problem in IE. I haven't even viewed the page on any other browsers yet, can someone help me please? Thanks so much! vonatah I have layed out the page but cannot seem to get the hang of the floats and positioning....!! If anyone can give me a hint how I can position my text in the main white space I would be so grateful as I am confusing myself as to what i am doing wrong!! the site is hosted at www dot getatrader dot com PLEASE HELP!! here is the CSS: Code:
body {
background: white;
font-size: smaller;
font-weight: bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
#topnav {
float:left;
position: absolute;
}
#topnav img{
display: block;
border: none;
}
#header{
position: relative;
text-align: right;
border: solid thin #999999;
margin: 0px 0px 0px 0px;
background: #336699;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #ffffff;
height: 155px;
}
#headerright{
position: relative;
top: 20px;
right: 10px;
}
#headerright li {
display: inline;
list-style: none;
padding: 40px;
}
#headerright img {
border: none;
}
#headerright a:link {
color: #ffffff;
text-decoration: none;
}
#headerright a:visited {
color: #ffffff;
text-decoration: none;
}
#headerright a:hover {
color: #ffffff;
text-decoration: none;
}
#headerright a:active {
color: #ffffff;
text-decoration: none;
}
h1 {
}
h2 {
width: 200px;
text-align: center;
color: white;
background-color: black;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
}
#container {
width: 956px;
padding: 10px;
margin: 0px auto 0px auto;
height: auto;
text-align: left;
border: 1px solid #ddd;
}
#button {
position: relative;
display: block;
width: 152px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: #336699;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
height: 500px;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
#maintext {
position: absolute;
float: left;
}
#footer
{
color: white;
background-color:#336699;
font-size: small;
font-family: Verdana,Arial,Helvetica,sans-serif;
margin: 0px 0px 0px 0px;
}
Hello Gents, I am trying to get ride of the white space above the menu and above the big sliding banner...Any pointers would be great. getyoursongsmixed.com/wordpress is my site You guys rock thanks Misalignment - white space in IE 8 Hi Not able to find the cause of the spaces in IE8. works perfect in FF http://tinyurl.com/26resg9 The same code on different website works fine in both IE8 and FF http://tinyurl.com/y9hvmmw I know the problem is somewhere here in main.css file Code:
.content-wrap{
background:url(watermark.jpg) no-repeat;
width:1000px;
margin:0 10px;
padding:0;
}
Can someone help? I read several threads on devshed, but cannot seem to resolve the issue. I am trying to line up my text and images within a div or span tag with the table just below it such that there is no white space in between. It works in Firefox. Link demonstrating problem in IE: http://test.hmedicine.com/shopping/catalog/kits CSS: .tb{font: 8pt verdana;vertical-align:top;margin-top:0;margin-bottom:0;font-weight:bold} HTML: <span class="tb"> Homeopathic Medicine Shop </span><a href="/shopping/catalog"><img src="/shopping/pics/topbar1shopping.gif" alt="shopping" border="0"></a><a href="/news/guide/guide.php"><img src="/shopping/pics/topbar2.gif" alt="guides" border="0"></a><a href="/shopping/service"><img src="/shopping/pics/topbar3.gif" alt="customer care" border="0"></a><a href="http://www.forum.hmedicine.com/index.php"><img src="/shopping/pics/topbar4.gif" alt="user forums" border="0"></a><br> <table width="720" cellpadding="0" cellspacing="2" bgcolor="009999"> Thanks so much in advance. If it's hard to follow, i can post screenshots. Does anyone know how to assure that checkboxes and their labels stay together? My situtation: I have several rows, each with several checkboxes. I want to assure that if a line wraps, each checkbox stays with its label (either each stay on the same line, or each move to the next, but never leave checkbox on one line and label on the next). I have tried several varients on: <span style= "whitespace: nowrap;". .... checkbox and label description... </span> or <label style= "whitespace: nowrap;". .... checkbox and label description... </label> even used both... have also tried a non-breaking space between label and checkbox control. <span> works on mac with Netscape, IE, Opera or Safari ... but alas it does not work on windows with IE 5.5 [unfortunately it acts as if 'nowrap' applies to the whole line, forcing viewers to scroll right to see all options] I can find documentation that says "white-space" can apply to <span> or <label>, and also documentation that says it can't. I guess the latter could explain the problem. But does anyone know how to keep the label and checkbox together thanx As a way to learn XHTML-Strict/CSS, I'm making a funny site with the goal of recruiting new people to be my friend. However, I can't seem to get rid of a horizontal bar of white space between the Title div and News & Content divs. I could fix it by making the News and Content positions absolute, but then I'd be unable to have a footer. Does anybody know why that white space exists, or better yet, how I can get rid of it? Site is http://www.kennygraham.net/index.html and CSS is http://www.kennygraham.net/perfect.css Thanks in advance to anyone who can help. any body know what i need to add to this CSS to get the 2px looking white space that sits to the left of each <li>? Code: <ul id="navlist"> <li><a href="index.html">Home</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Shipping Information</a></li> <li><a href="contact_us.html">Return Policy</a></li> <li style="border-right:none;"><a href="showcart.cfm">View Cart</a></li> </ul> Code:
#navlist li {
font-size: 12px;
font-family: Helvetica, Times, serif;
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
border-right: 1px solid black;
background-color: #D5DED9;
}
I have 2 columns. The main one and the sidebar. The problem is that the sidebar extends down the page further then the main column. I am using a color in the background. The color does not extend all the way down. The main area stops about half way down the sidebar and just leaves white space there. The whole page is colored except for this square of white in the middle. Also if I extend the main area content to be longer then the sidebar then the sidebar will have white underneath it instead. I added a nav bar to my page. when I did so I now get a white space at the top of the page above the pictures I'm not sure why. Here's a link the the page Dead Link(Link removed because it contained copyrighted content that was more than fair use would allow for. I don't want my friend getting in trouble) any help would be appreciated. In IE6, there is an annoying white space at the top of this page: http://gamingz.com/rpganew/test2.html . This is mostly in the 1024 by 768 + resolution. (I think) I can not figure out what is causing it. I simply want it to be at the very top. Also, it looks fine in IE7 but unfortunately I'm stuck with using it! The page is validated. (And as for the giant white space at the bottom, I'm still trying to figure out how to get to the two main boxes (grey and blue) to stretch 100% vertically. But, that is not as important right now.) Thanks First of all here is the page: http://xander6669.com/ It looks like I want in IE, but there is a still a white space on top of the page with firefox/opera. I've tried hundreds of things but I can't seem to be able to fix it. Anyone could give me a hand? Here is the HTML and CSS: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/><title>Xander6669</title> <link rel="stylesheet" href="body/body.css"/></head><body> <img src="images/border1.gif" alt="" height="5" width=779"/></body></html> CSS: Code: body {
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. |
|||||||