|
CSS - Css Height/spacing Issue In Ie
Hi there,
I am building a site which is working fine in Netscape but is not showing correctly in IE 6. The yellow line I have is not "listening" to its 10px height and there is some mystery spacing occuring around it at well....I have looked around, but can't seen to figure out what the fix is. I would really appreciate some help! Here is the .css and the link: http://www.kohlrbaby.com/vcc/boxlesson.htm body { margin: 0px 0px 30px 0px; padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #eee; background-color: #ffffff; text-align: center; } a { text-decoration: none; color: #eee; outline: none; font-size: 12px; } a:visited { color: #ccc; } a:active { color: #ccc; } a:hover { color: #990000; text-decoration: underline; } p { font-size: 12px; line-height: 22px; margin-top: 0px; margin-bottom: 0px; color: #000000; text-align: left; } #head { padding: 0px; margin-top: 30px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ border-top: none; border-right: 1px solid #43709e; border-bottom: none; border-left: none; text-align:left; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 726px; height: 110px; } #yellowStrip{ width: 726px; background-color: #e7d77e; height: 10px;/*height is not functioning?? */ padding: 0px; } #lftBar { width: 93px; background: #43709e; float: left; } #mainBox { border-right: 1px solid #43709e; margin-top: -1px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: #43709e; border-top: none; width: 726px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 726px; } .innerbox { padding: 30px; background-color: #ffffff; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left:93px; } #bottom { padding: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:left; voice-family: "\"}\""; voice-family:inherit; } #bottomText{ padding: 0px; margin-top: 10px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:center; voice-family: "\"}\""; voice-family:inherit; font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; color: #ccc; } Similar TutorialsHi, I'm developing the following site and am having some issues with spacing and heights. The first and major problem is in Firefox. As you will see at the bottom, my content "grows" out of it's wrapper div for some reason. It works great in IE, where the height of the content will determine how high both the side and main columns are. The second problem is in IE. There is too much space between the menu and the image above it. I want it to be flush to the image, as it is in Firefox. How can I go about solving these two issues? Hi, It seems I just can't get away from the height: 100% problems. I tryed making my body 100% and my container min-heaight 100% but that didn't work. I'll post the index and css below. I also want there to be a 15px space between each box 'lightbox, lightbox2, topbox, bottombox.. (they aren't spacing at all?) www.carbenco.com/resume/ index 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"> <head> <title>Terry Cantwell - Resume</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" title="default" /> </head> <body> <div id="container"> <div id="topbox">Hi</div> <div class="lightbox">Hi</div> <div class="lightbox2">Hi</div> <div class="lightbox">Hi</div> <div class="lightbox2">Hi</div> <div class="lightbox">Hi</div> <div class="lightbox2">Hi</div> <div class="lightbox">Hi</div> <div id="bottombox">Hi</div> </div> </body> </html> css Code: body {
margin: 0px;
padding: 0px;
text-align:center;
background-color: #3F3727;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
#container {
position: relative; top: 0px;
margin-left: auto;
margin-right: auto;
text-align:center;
width: 600px;
height: 100%;
background-color: #E9E4DC;
}
#topbox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #e9e4dc;
}
.lightbox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #B1A283;
}
.lightbox2 {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #9B8862;
}
#bottombox {
position: relative; top: 15px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 450px;
padding: 5px;
background-color: #e9e4dc;
}
I'm having a problem with my content div positioning in IE 6 only. The best way to show my issue would be to show you a screenshot of the issue with both IE 6 and IE 7 (see attached) IE6 is on the left and IE7 on the right. index.php Code:
<div id="main">
<div id="content">
<div class="leftColumn">
<?php include_once "includes/inc_leftColumn.php"; ?>
</div>
<div class="rightColumn">
<?php include_once "includes/inc_rightColumn.php"; ?>
</div>
<div class="middleColumn">
<?php include_once "includes/inc_index_page.php"; ?>
</div>
</div>
<div id="footer">
<?php include_once "includes/inc_footer.php"; ?>
</div>
</div>
attached stylesheet css Code: Original - css Code #content { width: 970px; height: auto; /*min-height: 500px;*/ margin: 0px 0px 0px 0px; background: url('/media/images/global_content_background.gif') repeat-y; } #content div.leftColumn{ min-height: 435px; margin-left:5px; padding:15px 15px 15px 15px; float:left; width:170px; z-index:1; text-align: left; vertical-align: text-top; background: url('/media/images/global_leftcolumn_background.gif') no-repeat; } #content div.middleColumn{ min-height: 435px; padding:15px 15px 15px 15px; float:right; width:530px; text-align: left; vertical-align: text-top; } #content div.rightColumn{ min-height: 435px; padding:15px 15px 15px 15px; margin-right:5px; float:right; width:170px; text-align: left; vertical-align: text-top; background: url('/media/images/global_rightcolumn_background.gif') no-repeat; }
I've been pounding my head on this theme. Here's what it looks like in Firefox and Safari Here's what it looks like in IE As you can see there is a spacing issue in IE. This is a theme for Vanilla which uses list tags to generate the listing of forum topics, I'm trying to stay away from altering the original structure as much as possible (which gets messy), so I use Firebug to help me build the CSS. Any ideas? Hi all - I've got an issue and hoping someone has an idea how to help. I'm trying to correct an alignment issue within a page only using css - without modifying the code. What I have is a DIV with a SPAN and an INPUT box inside. The INPUT box should be set at 100% and aligned to the right. However, the SPAN section causes the textbox to scoot over outside of the div. How can I set the INPUT box to 100%, and stay within the DIV? I'd like to share an image to show you what I mean, but apparently since I'm new - I cannot do that. Any help would be greatly appreciated. Hi Guys, I am having a small problem with IE, the height between <p> tags is considerably different to that of firefox. I think it is a padding problem but i am unable to crack it. The area i am referring to is the left side of the page where the two forms are and the images text. my website is here my css file can be found here Any suggestions? Greetings, I am attempting to increase the space between the navigation links listed on the left column of this index page. fop27.org/fopnet/FPT/ I have been trying add spacing between these flash images for hours to no avail. Ideally, I would like to add approx half inch of spacing between each image to balance out the page. I have minimal knowledge of css and would greatfully appreciate any assistance. All the Best! Theres a small spacing issue thats only coming up in opera for the navigation on this site. It seems to be only 1px, but I cant for the life of me find out where its coming from. The hover background doesn't extend all the way down, as it does in firefox/ie. I think its some issue with top:32px; in nav ul li, but I don't know what the solution is. Any help is appreciated. Demo link at www.ryancolantuono.com/test Code:
body {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
margin: 0;
padding: 0;
}
#content {
color: #555;
margin: auto;
width: 780px;
}
/* ----------------------- HEADER ----------------------- */
#top-header {
background-color: #000;
height: 20px;
color: #eee;
border-bottom: #555 solid 1px;
}
#top-header .login {
float: right;
margin: 5px 10px 0 0;
font-size: .7em;
}
#top-header .login a{
text-decoration: none;
color: #70d5d4;
}
#mid-header {
background: #222 url("../images/mid-header.png");
height: 55px;
}
#bot-header {
background: #4eaead url("../images/bot-header.png") repeat-x;
height: 105px;
}
/* ----------------------- END HEADER ----------------------- */
/* ----------------------- NAVIGATION ----------------------- */
#nav {
float: left;
margin: 0 15px 0 0;
}
#nav ul {
margin: 0;
padding: 0 70px 0 0;
display: block;
list-style: none;
}
#nav ul li {
top: 32px;
display: inline;
position: relative;
clear: both;
}
#nav ul li a {
font-size: .8em;
color: #fff;
text-decoration: none;
padding: 3px 12px 3px 12px;
}
#nav ul li a:hover {
background-color: 70d5d4;
color: #000;
-moz-border-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
padding: 5px 12px 5px 12px;
}
/* ----------------------- END NAVIGATION ----------------------- */
Code: <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/> </head> <body> <div id="top-header"> <div class="login">Have an account? Login <a href="#">here</a>.</div> </div> <div id="mid-header"> <div id="nav"> <ul> <li><a href="#">Home</a> <li><a href="#">About Us</a> <li><a href="#">Portfolio</a> <li><a href="#">Links</a> <li><a href="#">Contact</a> </ul> </div> </div> <div id="bot-header"></div> </body> </html> Hi everyone, I'm a little stumped on why I'm having a wide space showing up when viewing a particular page with FF and not IE7. Take a look at the following page... http://spotabusiness.com/View-user-profile.html?user=403 Notice the big space between the profile picture and the tabbed box below it in FF. This space doesn't exist when using IE7. Thanks for any input This may actually be a css not a javascript question. Those two are so tightly coupled the distinction blurs. My apologies if it is in the wrong forum. I adapted this social network bookmarking thing that I've seen kicking around. It uses prototype and scriptaculous that is why I am posting it here. It basically has an icon for each social network with a custom link to save the current page to the network in question. It appears on the following page http://demo.tixrus.us/calendar.php?filter=all below the calendar. The spacing is all wrong when it first renders, I want all the icons to be jam packed together. As you can see, it messes up and puts the last one at the beginning of a new row (not what I want). Now if you hide them and then click Social Networks again, they appear the way I wanted them in the first place. Is it because in the source each icon is on its own line? Code: <a href="xxxxx"><img ....../></a> <a href="yyyyy"><img ...../></a> as opposed to jam packing the codes into extremely long lines Code: <a href="xxxxx"><img ....../></a><a href="yyyyy"><img ...../></a> I remember this being an issue with most browsers many yrs ago.. I could run each row together on a huge line but it would make the code template even harder to read and maintain than it already is. So if there is some style thing I can do I would prefer to do that. The stylesheet for this stuff is at the bottom of http://demo.tixrus.us/styles/tixstyles.css I already explicitly set the height and width for the icons (they weren't previously) and that is fine but it was never the issue and it doesn't solve the spacing issue. Trying to resolve the spacing issues when using a list. IE honors the set margin while FF appears to add much more amrgin spacing. I have tried using display:inline but when I do, I lose the haning indent. Any suggestions? the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page. Any ideas? I attached my style sheet as well. thanks. http://bowtree.org/latest/luminaries.php http://bowtree.org/latest/index.php So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it. I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute? I have a list of faculty members with a picture and bio for each entry and I am having trouble creating a consistent amount of vertical space between the entries. This is because some of the bios are shorter than the picture and some are longer, requiring me (for the shorter entries) to add <br />s to the bio to reach the end of the picture. Of course, depending on the browser and display settings, a greater or smaller number of <br />s are needed to get to the end of the picture so code that looks right on one pc does not look right on another. Here's a sample of the code I am using: Code: <h3 class="blue_title">Bob Smith</h3> <p><em><img height="141" width="120" src="images/stories/bob.jpg" alt="bob" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Math and Physics.</em><br />The quick brown fox jumped over the lazy dog. <em>Since 1999.</em></p> <br /><br /><br /> <p> </p> <h3 class="blue_title">Edgar Jones</h3> <p><em><img height="141" width="120" src="images/stories/edgar.jpg" alt="edgar" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Spanish, Greek, Latin,<br />and Latin American History.</em><br />he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog.<em>Since 2005.</em></p> <p> </p> Because the bio in the first entry is short, I need those three extra <br />s to reach the bototm of the picture (otherwise the next entry floats up and into the first). But as a result, the spacing between entries where the top entry needed <br />s looks wrong compared to other entries depending on the user's individual settings. Any sugestions for how to fix this problem? I guess I could set up a table and use different rows for each entry, but I was hoping not to need a table. Thanks. (p.s. - I am using joomla for this site but I don't think that's relevant to this question.) Hi, This renders ok in firefox but not in IE, it places extra space between the elements. Can someone correct it for me please, i cant see where im going wrong. Thanks. the CSS: Code: #menu {
margin: 0px;
padding: 0px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
#menu ul {
border: 0px;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#menu ul li {
display: block;
text-align: left;
padding: 0px;
margin: 0px;
}
#menu ul li a {
border-top: none;
border-bottom: 1px solid black;
padding: 2px;
margin: 0px;
text-decoration: none;
display: block;
}
#menu a:link, #menu a:visited {
color: black;
text-decoration: none;
}
#menu a:hover, #menu a:active {
background-color: #fffed9;
}
the html: Code:
<div id="menu">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</div>
plug this in and view it in ie and you'll see what i mean. I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Please look at this page - http://www.nationwidetranny.com/testimonials.asp The issue is obvious, the image(s) in div.testimonial go outside the div when what i want is that the div expands. The image is floated, might that be part of the issue. Any help would be appreicated so much. Thanks. Code:
div.testimonial{
position:relative;
width:667px;
min-height:200px;
padding:20px 0 30px 0;
background: transparent url(../images/testimonial_div_bg.gif) repeat-y;
font-style:oblique;
}
.testimonial_footer_bg{
position:absolute;bottom:0;left:-1px;clear:left;background: transparent url(../images/testimonial_div_footer.gif) no-repeat;width:667px;height:16px;
}
div.testimonial div.picture{
float:left;
margin:3px 13px 0 17px;
}
div.testimonial p{
margin:0 0 0 320px !important;
width:320px;
padding:0 !important;
}
div.testimonial p.nopic3{
margin:0 0 0 17px !important;
width:600px;
}
Hey I have a containing div with 4 inner spans that are set to be displayed like a block element (display:block and floated to the left. Now I want every span in the containing div to be the same height as the first span in the containing div. So if the first span in the containing div spreads to 30 pixels in height, I want the other three spans to do the same. Is there a way I can do this? Here is what the code kinda looks like: Code:
<style>
#c {
min-height:18px;
height:18px;
}
#c span {
color: #fff;
display:block;
float:left;
}
</style>
<div id="c">
<span class="s">blah</span>
<span class="s">blah</span>
<span class="s">blah</span>
<span class="s">blah</span>
</div>
Thanks Hie all, I m stuck with the min-height issue in IE. my requirement is to have div to be atleast 100% in height but not limited to 100% if the page has a vertical scrollbar. If i give out something Code: #pageSround
{
width:1004px;
background: url(../images/bg_main.gif) repeat-y 800px 0px;
background-color: red ;
min-height:100%;
height:auto !important;
}
this works good in FF as it shows the page to be atleast 100% when there is no scrollbar and expands the RED color to the bottom of the page if there is a scrollbar. The above thing doesn't work in IE though. I found a fast hack for IE min-height issue here http://www.dustindiaz.com/min-height-fast-hack/ but it doesn't work for me. or may be i m not giving the height attribute. How do i solve it. kindlgy post links or ur valuable comments. Thankyou Hi guys, I am not sure if any of you have experience this issue. The layout of my page from top to bottom is header (always stays at the top of browser) content footer (always stays at the bottom) the page looks perfect under ie7 firefox and ie6 if at full screen mode. but when i smaller the browser ie6 footer covers up my content which means i can't scroll right to the bottom of my content. the footer seems overlapping the content. any suggestion about how to fix this problem? |
|||||||