|
CSS - Pictures Of My Ie Gap Issue I Am Having
I am having a gap issue in my IE as you can see in both picture below ... I can't determine if that a css issue or a html issue.
The site is at http://www.stlaware.com and frontend is Mambo 4.5.2 First screenshot is a site viewed in IE6 and the red markings are the gap issues I am having And second screenshot is same site viewed in Firefox browser .. as you can see no gaps and much cleaner .. It's loaded via mambo module on top of a mambo template but I looked all over the html code and css sheet with no luck of finding a way to get rid of the gaps in IE .. Can anyone help me out here? Thank you Bill Similar TutorialsDear Ppls, I have a website which contains text with picture .... on the middle of the page(article). You can see the text and pictures, actually i want it to reduce the width of texts.. but i dont know ... this site is citiplza.com/about.html Some body could help me out would be appreciable. Thanks Regards Raggit Hello, I'm pretty new to CSS so I'm not really sure what I'm doing. Anyway, I created a website layout in photoshop and exported it to html, so far so good. But the area I have reserved for text is a picture, when I type over the picture it creates a cell, however my problem is when the text exceeds the width of the picture my whole layout gets messed up. My question is how would I put an auto overflow in. Here's my code: <tr> <td> <img src="images/index_02.jpg" width="279" height="1" alt=""></td> <td rowspan="2"> this is where my text goes</td> <td rowspan="2"> <img src="images/index_04.jpg" width="3" height="383" alt=""></td> </tr> <tr> <td> Thanks in advance Hello, I'm trying to put drop shadows under pictures using CSS. I made several tries but none is good yet. - Try 1 : relative positioning See http://tsaboteam.free.fr/css/relative1.htm (CSS code is included in the html file) Pro : Looks good in both FF and IE Cons : Can't put text inline - Try 2 : relative positioning with display: inline See http://tsaboteam.free.fr/css/relative2.htm Pros : Looks good in IE, text is inline Con : Looks bad in FF - Try 3 : floating positioning See http://tsaboteam.free.fr/css/float1.htm Pro : Looks good in FF Cons : Looks bad in IE, can't put text inline - Try 4 : floating positioning with display: inline See http://tsaboteam.free.fr/css/float2.htm Pro : Text is inline Cons : Looks bad in FF and IE Anyone got an idea on how to fix one of the ways I tried ? Or any thoughts of another method ? Thanks. Thanks for taking the time to read my question. I have 16 pictures on my page. In FF I have no extra space under each picture and in IE6 I do. Why? In IE you can see the container color (the non Orange colors) but in FF you don't. I've tried a bunch of stuff but can't figure it out. http://stuccotech.bravehost.com/ CSS: Code: html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #000000;
background-image:url(MainBackground.jpg);
background-repeat: no-repeat;
background-position: top center;
}
.TheFrame {
height: 20px;
width: 20px;
background-color: white;
float: right;
}
.MainContainer {
width: 646px;
height: 549px;
background-color: #3f3f3f;
overflow: hidden;
padding: 0px;
margin: 0px auto;
background-image:url(BehindLogo.png);
background-repeat: no-repeat;
background-position: top left;
}
.LogoArea {
height: 200px;
width: 200px;
/*background-color: white;*/
float: left;
margin: 0px;
padding: 0px;
display: inline;
}
.Logo {
float: left;
height: 120px;
width: 240px;
padding: 0px;
margin: 0px 0px 0px 2px;
display: inline;
background-image:url(LogoWithText.png);
background-repeat: no-repeat;
background-position: top left;
}
.NavBarMain {
background-color: #966200;
height: 120px;
width: 370px;
float: right;
margin-right: 20px;
margin-top: 10px;
padding: 0px;
display: inline;
}
.NavBarContent {
background-color: orange;
height: 90px;
width: 370px;
float: right;
margin: 0px;
margin: 30px 0px 0px 0px;
padding: 0px;
}
.TextBox1 {
float: left;
margin: 5px 0px 0px 10px;
padding: 5px;
width: 190px;
height: 305px;
overflow: hidden;
display: inline;
}
p.MainText {
color: white;
font-size: 14px;
}
p.MainText:first-line {
text-indent: 5px;
}
.ContentText {
color: white;
font-size: 14px;
}
.PortfolioHolder {
width: 414px;
height: 365px;
float: right;
margin: 25px 20px 0px 0px;
padding: 0px;
display: inline;
background-color: orange;
}
.MainPictureFrame {
width: 414px;
height: 318px;
float: right;
margin: 0px;
padding: 0px;
/*display: inline;*/
background-color: red;
}
.PortfolioPicture {
width: 414px;
height: 318px;
}
.PicInfoContainer {
float: left;
width: 414px;
height: 47px;
color: white;
font-size: 12px;
}
.SubPictureFrame {
width: 96px;
height: 72px;
margin: 10px 0px 0px 10px;
padding: 0px;
float: left;
background-color: yellow;
}
.SubPictureFrameFirstRowFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px;
float: left;
background-color: purple;
}
.SubPictureFrameFirstRow {
width: 96px;
height: 72px;
padding: 0px;
margin: 10px 0px 0px 0px;
float: left;
background-color: blue;
}
.SubPictureFrameFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px 0px 0px 10px;
float: left;
background-color: aqua;
}
.BottomNavContainer {
width: 550px;
height: 14px;
float: right;
margin-right: 40px;
margin-top: 10px;
}
.BottomNavHolder {
float: right;
}
.BottomNav {
font-size: 12px;
height: 14px;
margin-right: 20px;
float: left;
}
.PortfolioListContainer {
float: left;
width: 204px;
height: 250px;
overflow: auto;
display: inline;
background-color: #5f5f5f;
margin: 0px 0px 0px 5px;
padding: 0px;
border-top: 1px #ffffff solid;
}
.ListItemHome {
float: left;
width: 76px;
height: 20px;
padding: 0px 0px 0px 4px;
margin: 0px;
border-right: 4px solid white;
}
.ListItemBuilding {
float: left;
width: 110px;
height: 20px;
padding: 0px 0px 0px 4px;
margin: 0px 0px 0px 80px;
border-left: 4px solid white;
display: inline;
}
.ButtonContainer {
float: left;
display: inline;
background-color: aqua;
width: 204px;
height: 30px;
padding: 0px;
margin: -5px 0px 0px 5px;
}
.HomesButton{
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right: 4px solid white;
width: 80px;
height: 30px;
margin: 0px;
float: left;
}
.CommercialButton{
border-width: 0px;
width: 120px;
height: 30px;
padding: 0px;
margin: 0px;
float: left;
}
a.BottomNav:link {
text-decoration: none;
color: #D3D3D3;
}
a.BottomNav:visited {
text-decoration: none;
color: gray;
}
a.BottomNav:hover {
text-decoration: underline;
color: white;
}
a.BottomNav:active {
text-decoration: none;
color: white;
}
a.ContentText:link {
text-decoration: none;
color: #D3D3D3;
}
a.ContentText:visited {
text-decoration: none;
color: gray;
}
a.ContentText:hover {
text-decoration: underline;
color: white;
}
a.ContentText:active {
text-decoration: none;
color: white;
}
a.ListItemHome:link {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemHome:visited {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemHome:hover {
text-decoration: underline;
color: white;
}
a.ListItemHome:active {
text-decoration: none;
color: white;
}
a.ListItemBuilding:link {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemBuilding:visited {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemBuilding:hover {
text-decoration: underline;
color: white;
}
a.ListItemBuilding:active {
text-decoration: none;
color: white;
}
Thanks, Brad When I switch between pages with images on them, everything is fine. When I switch between pages without images on them, everything is fine. But when I switch to or from a page with a picture on it to or from a page without a picture on it, the page jumps sideways a bit. Most ppl probably wouldn't even notice this, but I find it really annoying and want a good way to get rid of this. I'm using a centered fixed width css style so I have no idea how this could be happening. I'll just add the css if needed: (Any random advice or advice on how to make buttons without photoshop would be awesome too!) Code: body {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
td {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
a {
text-decoration: underline;
font-family: Verdana;
font-size: 14px;
}
a:link {
color:#2828FF;
}
a:visited {
color:#2828FF;
}
a:hover {
color:#AFAFFF;
}
a:active {
color:#AFAFFF;
}
img {
border: none;
}
#wrapper {
width: 950px;
margin-left: auto;
margin-right: auto;
}
#title {
width: 100%;
font-size: 27px;
font-style: italic;
background-image: url("images/bgwinterowl.gif")
}
#links {
width: 100%;
padding: 15px;
}
#body1 {
border: 4 double;
border-color: red;
background: #FFFFF0;
width: 100%;
text-align: left;
padding: 15px;
}
#body2 {
background: #FFFFF0;
text-align: left;
padding: 15px 15px 15px 100px;
width: 500px;
}
WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position. This only happens in IE7 by the way. Thanks for taking time to read my question. How do I position 3 pictures beside eachother with no spaces between them? (so they look like one continuous picture) eg: ______ |1|2|3| |_|_|_| instead of ________ |1||2||3| |_||_||_| Thanks, Brad Hey folks, I have one glitch that I can't get rid of (bear in mind I am in my second week of CSS thinking so go easy on me) - and have basically come here to ask your advice. I think I'll have to put a browser detection within the head especially for IE7 as it's a being a problem. Here's the website: http://www.three60design.com/sky_site/home.htm it performs exactly as I like in FF and Safari but not IE. What do you think? The second glitch is this: http://www.three60design.com/sky_site/portfolio.htm Within FF the content in each "box" is ok in FF, but in IE it overflows the box. I don't want to have a scroll in there ie overflow: scroll or auto. What am I doing wrong!? Cheers! REALLY REALLY appreciate it The problem I'm having is very hard to explain, so I'll try to do it with pictures. In the attached image, five pictures are loaded with 2 links under each one (Enlarge & Remove). For some reason, when IE renders the page, the last one creates a random Remove link in the middle of the page on the next line. The XHTML code is he Code: <div class="column1of1"><span class="text-underline"><strong><br />Customer Images:</strong></span></div> <div class="column1of1"> <div class="column1of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="aaaa" alt="aaaa" src="/store/customer/uploads/thumbnails/1-aaaa1-.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div> <div class="column2of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="Another Picture" alt="Another Picture" src="/store/customer/uploads/thumbnails/1-Another_Picture.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div> <div class="column3of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="asfsfasf" alt="asfsfasf" src="/store/customer/uploads/thumbnails/1-asfsfasf.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div> <div class="column4of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="A Picture of Something" alt="A Picture of Something" src="/store/customer/uploads/thumbnails/1-A_Picture_of_Something.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div> </div> <div class="column1of1"> <div class="column1of4even"><a href="/store/customer/enlarge.php"><img style="padding-left: 11px;" title="sdfd" alt="sdfd" src="/store/customer/uploads/thumbnails/1-sdfd.jpg" width="120" height="96" /></a><span class="text"><a href="enlarge.php">Enlarge</a> / <a href="remove.php">Remove</a></span></div> </div> The CSS: Code:
.column1of1 {
float: left;
width: 590px;
display: block;
}
.column1of4even {
float: left;
width: 144px;
text-align: center;
}
.column2of4even {
float: left;
width: 144px;
text-align: center;
}
.column3of4even {
float: left;
width: 144px;
text-align: center;
}
.column4of4even {
float: left;
width: 144px;
text-align: center;
}
I've tried everything I could think of, but nothing works. Please help!! First take a look at the site in firefox or chrome: cristianoronaldo(dot)info as you can see the footer works great. However, when the site is viewed in IE (specifically IE8) the footer is displayed in the middle of the page. This happens throughout the whole site/blog when browsing with IE8 I have tried many things, such as trial and error, but nothing seems to work. Does anyone have any ideas on how to go about this? When I resize the browser then scroll across my div tag images move along. Last time I fixed this problem with "min-width:100px;" etc but now it won't work. Hoping someone can figure out this problem :P <html> <head> <link rel="stylesheet" type="text/css" href="layout.css"/> </head> <body bottommargin="0" leftmargin="0" topmargin="0" > <div id="designLayout" align="center"> <img src="echo_rain.jpg" alt="" /> <div class="button_facebook"> <form> <input type="button" value="" class="button_fb" onclick="window.location.href='()"> </form> </div> <div class="button_twitter"> <form> <input type="button" value="" class="button_tw" onclick="window.location.href='()"> </form> </div> <div class="button_soundcloud"> <form> <input type="button" value="" class="button_sc" onclick="window.location.href='()"> </form> </div> <div class="button_youtube"> <form> <input type="button" value="" class="button_ut" onclick="window.location.href='()"> </form> </div> </div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ body { background-color:#000; } .button_facebook { top:-135px; left:-230px; width:0px; height:0px; position:relative; } .button_fb { background:url(facebook.png) ; border:none; width:80px; height:80px; } .button_fb:hover { border:none; background:url(hover_fb.png); width:80px; height:80px; } .button_twitter { top:-135px; left:-115px; width:0px; height:0px; position:relative; } .button_tw { background:url(twitter.png) ; border:none; width:80px; height:80px; } .button_tw:hover { border:none; background:url(hover_tw.png); width:80px; height:80px; } .button_soundcloud { top:-133px; left:0px; width:0px; height:0px; position:relative; } .button_sc { background:url(soundcloud.png); border:none; width:75px; height:75px; } .button_sc:hover { border:none; background:url(hover_sc.png); width:75px; height:75px; } .button_youtube { top:-138px; left:115px; width:0px; height:0px; position:relative; } .button_ut { background:url(youtube.png); border:none; width:80px; height:80px; } .button_ut:hover { border:none; background:url(hover_ut.png); width:90px; height:90px; } Cheers in advance. Hey i don't know if this can be fixed by now i have looked everywhere and tried everything. i have a style sheet that does not work in IE6 and i don't know why. Code: body{
margin: 0;
padding: 0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color:red;}
#maincontainer{
width: 940px; /*width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #EAEAEA;
height: 90px /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 12px;
background: url(images/png_logo.gif) no-repeat right bottom;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 190px 0 188px; /*margins for content column. should be "0 right columnwidth 0 leftcolumn width*/
}
#leftcolumn{
float: left;
width: 188px; /*width of left column in pixel*/
margin-left: -940px; /*set margin to that of -(maincontainerwidth)*/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 195px; /*width of right column in pixel*/
margin-left: -195px; /*set margin to -(rightcolumnwidth)*/
background: #336699;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 2px; /*margins for inner div inside each column (to provide padding)*/
margin-top: 0;
}
A.menulink{
display: block;
width: 170px;
text-align: left;
text-decoration: none;
font-family: arial;
font-size: 11px;
color: #000000;
border: none;
border: solid 1px #ffffff;
}
A.menulink:hover {
border: solid 1px #6100c1;
background-color: #f0e1ff;
}
the html code is Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link href = "style.css" rel = "stylesheet" type = "text/css">
<title></title>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube">
<h1>PowerNet Global
</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
Thank you for visiting PowerNet Global, please ignore the mess as we update our site to bring you more up
to date information to help you needs a little better. The site may continue to change over the next few months, if you have
any suggestions on how to improve our site to bring you better service please feel free to eamil us at
<a href="mailto:support@pngusa.net">Support@pngusa.net</a>
<script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/tabnews.xml&up_ned=us&up_items=7&up_show_image=0&up_font_size=13pt&up_selectedTab=0&up_tabs=&up_last_url=&synd=open&w=315&h=260&title=Google+News&lang=en&country=ALL&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB %7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
</script>
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><strong>Navigation</strong>
<table border="0" width="180">
<tr>
<td ><h5>Sevice Information</h5>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#e6e6e6"><a href="services.html" class="menulink">Overview Of Services</a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#e6e6e6"><a href="http://webmail.pngusa.net/src/login.php" class="menulink">View Mail</a>
</td>
</tr>
</table>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
<script src="http://gmodules.com/ig/ifr?url=http://blog.outer-court.com/homepage/miniweb.xml&synd=open&w=180&h=330&title=Mini+Web&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB %7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
</script>
</div>
</div>
<div id= "footer">
<a href="http://www.pngusa.net">Go back Home</a>
</div>
</div>
</body>
</html>
"
In IE6 the right column does not show up and i am unable to give a link as it is on internal test server. I was fixing up an existing layout by doing a pretty simple task of adding a link and placing it above the containing box without moving the code. I successfully did that with changing the position and whatnot. The only problem is in IE 7 and 8 it thinks the link is inside of a li and copies that li's properties for some reason. Here's the layout, there is a box that is a span with li's with hover classes that contain a few spans and an anchor. Outside of the li's, but still in the span box is another span that contains the link that I was fixing, it's the very last thing in the main span. What happens is when I hover over the last li it also changes the span that has my link in it to the same properties as the li. Code and Image follows. The Issue CSS Code:
#invitees {float:left; border:1px;border-style:solid;margin-bottom:10px;position:relative;margin-top:10px;}
#invitees li {list-style:none;font-size:12pt;padding:10px;letter-spacing:.2pt;}
#invitees li .email {min-width:300px;display:inline-block;}
#invitees li .sentts {min-width:300px;display:inline-block;}
#invitees li .hasvoted {min-width:100px;display:inline-block;}
#invitees li:hover .header {}
#invitees li.header{font-weight:bold;background-color:#EBEBEB !important; color:#3E4041 !important;}
#invitees li.odd {background-color:white;}
#invitees li.even {background-color:#EBEBEB;}
#invitees li:hover{background-color:gray; color:#FFFFFF;}
#invitees li:hover a{background-color:gray; color:#C9EA5A;}
#invitees li a{font-weight:bold;}
#invitees #sendall {position:absolute;top:-20px;left:0px;}
#invitees #sendall a {font-weight:normal;color:#799712;text-decoration:none;}
#invitees #sendall a:hover {background-color: transparent;}
HTML Code: <!-- invitees --> <span id="invitees" class="clearfix"> <li class="header"> <span class="email">Invitations Have Been<br/>Sent To</span> <span class="sentts">Sent At</span> <span class="hasvoted">Did They<br/>Vote?</span> </li> <li class="odd" /> <span class="email">swindle.james@ymail.com</span> <span class="sentts">Thu, Jun 24 2010 01:08 PM</span> <span class="hasvoted">no</span> <span id="6815"><a href="javascript:resendInviteEmail(6815);">Send Reminder</a></span> </li> <li class="even" /> <span class="email">wilingua@hotmail.com</span> <span class="sentts">Fri, Jun 25 2010 11:58 AM</span> <span class="hasvoted">no</span> <span id="6913"><a href="javascript:resendInviteEmail(6913);">Send Reminder</a></span> </li> <span id="sendall"><a href="javascript:resendAllInvites([6815, 6913]);">Resend to everyone who hasn't voted.</a> </span> </span> P.S. I know the XHTML is not valid, I didn't create this, I'll work on that after I get this CSS down. Hopefully Google showed me to a site that can help Thanks in advance for any advice Edit: My dumb butt figured out the issue...It's because there was no ul for the li's, issue solved. Feel kinda dumb though :/ lol I am confident this is a css issue http://www.sweetbyholly.com/index2.php The navigation in the site above, in IE7 only, shifts to the left on hover. I can't for the life of me figure out why. Can anyone pinpoint this issue? It seems the second nav item is loosing some margin or padding on the left on hover. I can figure it out. If you go he
Code: http://aissolutions.ca/clients/enerquality/training/courses/ you will see that when you click on the "expand text" link, it works fine in Firefox. However, in IE, the content gets "cut off" (the page doesn't expand with the content). Any ideas for a fix? Hey I have a few containing divs and three divs in the last containing div so basically it's three columns. Well, I'm trying to get the middle column to always span 100% height of the content, not the page. I have a min-height so it's not too small, but if the content is big, I want the column to basically stretch to fit the content inside. Here is the pertaining code: Code:
html,body {
font-family: verdana, arial, helvetica;
margin: 0px;
padding: 0px;
height: 100%;
}
#container {
padding: 0px;
border: solid 1px #fff;
width: 900px;
margin: 0px auto;
text-align: left;
background-color: #000;
min-height: 1000px;
height: 100%;
}
html>body #container { height: auto; } // because Mozilla actually interprets the height:100% correctly..*sigh*
// Second containing div
#content_main {
background-color: #000;
width: 900px;
height: 100%;
color: #000;
font-size: 11px;
margin: 0px;
}
// All columns
#leftcolumn,#middlecolumn,#rightcolumn { margin: 0px; min-height: 900px; }
// Middle column
#middlecolumn { width: 493px; height: 100%; float: left; margin-left: -10px; }
html>body #middlecolumn { margin-left: 0px; }
// Third containing div
#thecontent {
width: 460px;
height: 100%;
min-height: 400px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
Pertaining HTML: Code: <div id="middlecolumn"> <div id="thecontent"> <div id="contentheader"><p>'.$contentHeader.'</p></div> '.$form.' <div id="thecontent2"> '.$pagecontents.' </div> <div id="contentbottom"></div> '.$formend.' </div> </div> Oh here are the other divs that are in "thecontent": Code:
#thecontent2 {
width: 445px;
min-height: 600px;
background-color: #fff;
line-height: 1.8em;
font-size: 11px;
padding: 15px 0px 0px 15px;
text-align: left;
margin-left: 10px;
height: 100%;
}
#contentheader {
background: url(images/contenttop.gif) no-repeat;
width: 488px;
height: 35px;
padding-top: 3px;
text-align: center;
margin: 0px auto;
margin-bottom: -3px;
margin-left: -2px;
}
#contentheader p {
color: white;
font-size: 14px;
font-weight: bold;
margin-top: 6px;
}
#contentbottom {
background: url(images/contentbottom.gif) no-repeat;
width: 471px;
height: 28px;
margin-left: 3px;
}
Ok that's alot of code IE does it correctly as I'm sure most of you know, but how can I get the 100%-height-content span for Mozilla? Thanks |
|||||||