CSS - Sooo Close...ie Hovre Problem

Hello everyone,

At the moment I am trying to achieve a re-design of my website (http://www.madewithpixels.co.uk) in pure XHTML/CSS.

After many hours of tweaking and a little bit of help here and there, I now have a version that almost exactly matches my original html design save for a couple of issues.

I'm aiming to have a fixed sized header, 2 content boxes that fill the available height of the browser window and and a footer that sticks to the bottom of the browser,

I'm so very nearly there, except somethings not quite right.... I can get the container expanding in height with the browser window no problem, by setting the height attributes in the CSS and the height of the DIV in the html to 100% height ... except it's TOO big, the footer is waaay down the bottom and requires me to scroll down to it (not what i want)....AND... it doesnt work in mozilla...

so, after a bit more tweaking, I changed the %'s for em's and now mozilla works correctly... so far so good, now to get the content boxes and the footer to
remain in view all the time.... easy i think, just play about with the height attributes in the CSS and the DIV and everthing should be fairly straightforward.

But no! it doesnt work, whatever i do, i cannot get the main content coloumns and the footer to remain in view and fit to 100% height of the browser at the same time, I've tried every combination of % and EM's that I can think of, and can acheive both effects, but not at the same time.

also, in IE I have about 10px of white above the footer that i cant eliminate... If anyone can give me an explanation as to what is happening (im sure the two problems are related) I'd be very grateful.
I've been tweaking this code for two days now and am getting nowhere.

i'm getting closer all the time, i just need to understand whats happening here and I reckon i'll be ready to start putting the rest of the elements in like the navigation etc

Thanks very much to anyone who has the time to make a suggestion, its very much appreciated.

For reference, you can see the latest version he
http://www.madewithpixels.co.uk/sandbox/latest.htm

cheers

Mike

I need a popup auto close in 3 second to show result is true.
I try it in javascript,but no border is impossible in my ie8. I need it in css. Send me some solutions. THank all

I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm

Code:

.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

Code:

<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
CONTENTS GOES HERE
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close?

thanks in advance for your help

Hey,
I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble.

my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css

Thanks.

Hello. I am new at css and web design so if these are easy problems please excuse.

First of all, the website url

http://www.onlinecasinoboss.com

In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like.

And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like.

I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender.

Just beginner bitching.

Thanks for the help!

Hello everyone, I am hoping I could get some help on this.

I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that.

So, the issue lies within this example page:
tinyurl.com/rediculouswebsite


The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox.

I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue.

Thank you all very much.

I have created this style

.class1 A:link {text-decoration: none;color:white;}
.class1 A:hover {text-decoration: underline; color:Orange;font-weight:bold}
.class1 A:visited {text-decoration: none;color:white;}
.class1 A:active {text-decoration: none;color:white;}

In the aspx page but the problem is that when the user visit some link and try to put the mouse again on that link color is not changing but yea it is making bold font.

What can be the problem or something I am missing ??

Hello,

I'm struggling to make my homepage work correctly with IE and I'd appreciate some help.

The URL is www . andytrus . com

Firefox looks good, but in IE, the document is for some reason making the size of the page much longer than it should be. As you'll see, there is a lot of wasted space on the bottom I've been trying to get rid of to no avail. No other page is having this problem on my site and its very frustrating!

Here is the code to the index page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see (URL address blocked: See forum rules)" />
<title>Portfolio Website</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--

if (document.images) { // Preloaded images
demo1 = new Image();
demo1.src = "images/bigtext1.jpg";

demo2 = new Image();
demo2.src = "images/bigtext2.jpg";

demo3 = new Image();
demo3.src = "images/bigtext3.jpg";

demo4 = new Image();
demo4.src = "images/bigtext4.jpg";

demo5 = new Image();
demo5.src = "images/bigtext5.jpg";

demo6 = new Image();
demo6.src = "images/bigtext6.jpg";

demo7 = new Image();
demo7.src = "images/bigtext7.jpg";

demo8 = new Image();
demo8.src = "images/bigtext8.jpg";

demo9 = new Image();
demo9.src = "images/bigtext9.jpg";

demo10 = new Image();
demo10.src = "images/bigtext10.jpg";

demo11 = new Image();
demo11.src = "images/bigtext11.jpg";

demo12 = new Image();
demo12.src = "images/bigtext12.jpg";

demo13 = new Image();
demo13.src = "images/bigtext13.jpg";

demo14 = new Image();
demo14.src = "images/bigtext14.jpg";
}

function timeimgs(numb) { // Reusable timer
thetimer = setTimeout("imgturn('" +numb+ "')", 13500);
}

function imgturn(numb) { // Reusable image turner
if (document.images) {

if (numb == "14") { // This will loop the image
document["demo"].src = eval("demo14.src");
timeimgs('1');
}

else { document["demo"].src = eval("demo" + numb + ".src");

timeimgs(numb = ++numb);
}
}
}

// -->
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
 div.c2 {clear:both}
 span.c1 {color: #F0E9B9; font-family: Trebuchet MS; font-size: 1.3em}
/*]]>*/
</style>
</head>
<body onload="timeimgs('2');">
<div id="outside_container">
<div id="container">
<ul id="menu">
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
<ul id="right_menu">
<li><a href="index.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<img src="images/bigtext1.jpg" name="demo" id="panel" alt="demo" />
<div id="content">
<div class="column1">
<h2>Recent work</h2>
<ul class="work">
<li><a href="blowthewhistle.html"><img src="images/work_4.jpg" alt="Sample Work 1" /> <span class="c1">Created a system to help basketball referees make better calls through user-centered design.</span></a></li>
<li><a href="madness.html"><img src="images/work_1.jpg" alt="Sample Work 1" /> <span class="c1">Scripted a unique story and used Google Sketchup to design 3D models for a working video game.</span></a></li>
</ul>
</div>
<div class="column2">
<h2>Background</h2>
<p>Hello, my name is Andy Trus, and I am an interaction designer. I recently graduated from Indiana University with a Masters in HCI, and I also have an undergraduate degree in Marketing from IU in 2004. My combination of skills, creativity, business accumen, and leadership make me an invaluable asset to any design team.</p>
</div>
<div class="c2"></div>
</div>
</div>
</div>
<div id="footer"><img src="images/footerlogo.jpg" alt="AndyTrus.com" /> <span id="footer_text">A portfolio designed to showcase my talents as a designer.</span></div>
</body>
</html>

Here is the code to my CSS which is used in this page

Code:

body {
margin : 0;
padding : 0;
background-color : #11090a;
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}

#outside_container {
background : url(images/bg2.jpg) repeat-x;
}

#container {
background : url(images/bg1.jpg) no-repeat;
min-height : 545px;
max-height : 560px;
width : 1007px;
position : relative;
}

#logo {
position : absolute;
top : 0;
left : 0;
}

#panel {
position : absolute;
top : 115px;
left : 50px;
}

ul#menu {
margin : 0;
padding : 0;
position : absolute;
top : 85px;
left : 67px;
}

ul#right_menu {
margin : 0;
padding : 0;
position : absolute;
top : 85px;
right : 205px;
}

ul#menu li, ul#right_menu li, ul#resume_menu li {
margin : 0;
padding : 0;
list-style : none;
margin-right : 15px;
font-size : 11px;
text-transform : uppercase;
display : inline;
}

ul#menu li a, ul#right_menu li a, ul#resume_menu li a {
text-decoration : none;
color : #bd92b2;
}

ul#menu li a:hover, ul#right_menu li a:hover, ul#resume_menu li a:hover {
text-decoration : none;
color : #ffffff;
}

#content {
padding-top : 270px;
padding-left : 68px;
width : 815px;
color : #f0e9b9;
font-size : 13px;
line-height : 20px;
}

.column1 {
float : left;
width : 280px;
margin-right : 30px;
}

.column2 {
float : left;
width : 390px;
margin-right : 30px;
}

#content h2 {
font-family : Georgia, "Times New Roman", Times, serif;
color : #bd92b2;
margin : 0 0 20px 0;
font-weight : normal;
}

#content h4 {
font-family : Trebuchet MS, "Times New Roman", Times, serif;
color : #f0e9b9;
margin : 0 0 20px 0;
font-weight : normal;
}

ul.work {
margin : 0;
padding : 0;
}

ul.work li {
list-style : none;
margin : 0;
padding : 0;
clear : both;
}

ul.work li a {
color : #e0b882;
display : block;
padding : 5px 10px 5px 10px;
text-decoration : none;
font-size : 10px;
}

ul.work li a img {
float : left;
margin-right : 20px;
margin-bottom : 20px;
}

ul.work li a h4 {
color : #f0e9b9;
margin : 0;
font-weight : normal;
font-size : 13px;
}

ul.work li a:hover, ul.work li a:hover h4 {
color : #ffffff;
}

#footer {
border-top : 1px solid #3f2324;
padding : 5px 50px 45px 50px;
color : #bd92b2;
font-size : 9px;
line-height : 14px;
}

#footer img {
float : left;
margin-right : 10px;
}

#footer span {
display : block;
float : left;
width : 350px;
padding : 15px 50px 10px 40px;
}

#footer a {
color : #9e8292;
text-decoration : none;
}

#footer a:hover {
color : #ffffff;
}

a img {
border : 0;
}

I'd really appreciate the help. Thanks!

Hello all.

I've just started learning to code because I recently started a business and needed a website. I'm having a few issues.

I'm using the 960 Grid System plus a scroller found at queness.com

I can't post links here apparently, or I'd show you what I'm using.

The page renders fine in Firefox (Mac & PC) Safari (Mac & PC) IE 8 and Chrome.

IE 6 is screwed beyond understanding.

IE 7 Pushes me off the screen and links don't work.

And Opera squeezes my text together.

I have screen shots if necessary.

Here is a link to the site in question: ohmyyoga.com

I inserted a redirect script for IE 6-7. So you'll be redirected to my old site if you try the regular URL from either of those browsers. For the purposes of this, I've copied the site W/O the redirect.

The link is test2.ohmyyoga.com

The site validates CSS and XHTML. I'm sure it's something super simple. I'm just brand new to all of this. Any help would be appreciated.

Cheers

I've got this little navigation menu, everything works in Opera and Firefox, but in IE the border overlaps the whole thing.. See at http://www.leetwebmasters.com/2.0

CSS:
Code:

#menu3 {
   width: 200px;
   border:1px solid #BCD2E6;
   border-style: solid solid none solid;
   }
   
#menu3 li a {
     height: 24px;
   text-decoration: none;
   }   
   
#menu3 li a:link, #menu3 li a:visited {
   color: #8BADCF;
   display: block;
   background:  url(menu3.gif);
   padding: 8px 0 0 10px;
   }
   
#menu3 li a:hover {
   color: #627EB7;
   background:  url(menu3.gif) 0 -32px;
   padding: 8px 0 0 10px;
   }
   
         #menu3 li {
   list-style:none;
   }

   
   #menu3 ul {
   padding-top:0px;
   margin-top:0px;
   padding-left:0px;
   margin-left:0px;
   }

I got the bellow css that I am using to display a drop down menu on my page.
On firefox the drop down menu width looks ok , all the menu options looks the same. But in IE the drop down menu width is showing different. Is displaying the menu options broken as the size of the text.

The bellow lines are a representaion of how the menu in IE is showing. In Firefox all the lines are display the same.

How can I make it look the same in IE as in Firefox?

Drop down menu options
--------------------option 1
--------------------------------option 2
--------option 3
------------------------------------------------option 4

#menuh-container
{
position: absolute;
top: 8.2em;
left: 21.7em;
width:auto;
}

#menuh
{
font-size: 12px;
font-family: arial, helvetica, sans-serif;
width:auto;
float:left;
margin:2em;
margin-top: 0em;
width:auto;
}

#menuh a
{
text-align: left;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
width:auto;
}

/* menu at rest */
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color:#3399CC;
text-decoration:none;
}

/* menu on mouse-over */
#menuh a:hover
{
color: white;
background-color: #8FD400;
text-decoration:none;
width:auto;
}

/* attaches down-arrow to all top-parents */
#menuh a.top_parent, #menuh a.top_parent:hover
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

/* attaches side-arrow to all parents */
#menuh a.parent, #menuh a.parent:hover
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:auto;
/* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}

#menuh li
{
position:relative;
min-height: 0px;
vertical-align: top;
width:auto;
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:46px;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
width:auto;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:block;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

I have created a nav bar with css using the widely distributed '<ul>' coding. The problem I am having I think is with the anchor tags. The look of the nav bar is fine but depending on the float position the anchor tag immediately next to it won't follow the css.

Here is the css..
body {
margin:0;
padding:0;
}
div.container {
text-align:center;
}
div.center {
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:800;
text-align:left;
}
div.left {
float:left;
width:100;
height:500;
background-color:#007700;
}
div.right {
float:right;
width:130;
height:500;
background-color:#e8e8e8;
font-size:10pt;
}
div.header {
clear:both;
width:40%;
}
div.footer {
clear:both;
margin:0;
width:100%;
}
ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a.topmenu {
float:right;
width:5em;
height:2em;
text-decoration:none;
color:#005500;
background-color:#e8e8e8;
padding:0.2em 0.6em;
border-right:1px solid #005500;
}
a.topmenu:hover {
background-color:#005500;
color:#e8e8e8;
}
a.topmenu:visited {
float:right;
width:5em;
text-decoration:none;
color:#005500;
background-color:#e8e8e8;
padding:0.2em 0.6em;
border-right:1px solid #005500;
}
li {
display:inline;
}
a.leftmenu {
color:#ffffff;
text-decoration:none;
}
a.leftmenu:hover {
color:black;
}
a.leftmenu:visited {
color:#ffffff;
text-decoration:none;
}

and here is the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="newstyle.css"/>
</head>
<body>
<div class='container'>
<div class='center'>
<img src="fdat_logo_short.jpg" width=250 />
<ul>
<li><a class='topmenu' href="contact.php">Contact Us</a></li>
<li><a class='topmenu' href="about.php">About Us</a></li>
<li><a class='topmenu' href="services.php">Services</a></li>
<li><a class='topmenu' href="news.php">News</a></li>
<li><a class='topmenu' href="home.php">Home</a></li>
</ul>
</div>
</div>
</body>
</html>

Hi there,

Does anyone know what this code messed up in IE6, its fine in IE7 and firefox? I'v attached the html, css and a screengrab.

Thank

Code:

<div class="commentAvatar"><img src="/images/avatars/noavatar.gif" alt="USER" border="0" height="50" width="50"></div>
<div class="commentMessage">
<div style="float: right; width: 32px; text-align: center;"><div class="voteBad" id="3:-:15"></div><div class="voteGood" id="3:+:15"></div></div>
<em class="comment-info"><span>4 votes</span>
	<strong>guest23</strong> said <strong>(3 days, 10 hours ago)</strong></em>

    my message<br>
is here</div>

Code:

/* CSS*/
.commentAvatar {
	width:70px;
	height:64px;
	float:left;
	margin-left:114px;
	background-image:url(images/comment_left.gif);
	background-position:right;
	background-repeat:no-repeat;
}
.commentMessage {
	width:391px;
	min-height:50px;
	margin-left:184px;
	padding: 5px 10px;
	background-color:#555555;
	background-image:url(images/comment_bg.jpg);
	background-repeat:no-repeat;
}

http://www.refinethetaste.com/html/

My website displayed fine with internet explorer 7 and Firefox. But so many errors with IE 8. Is it my codes or IE8?

Hi, is there anyone could give some help to fix the IE problem of my site : (bcm-hk.com). The site works perfectly on Firefox and Safari. But when it go into IE, the site Footer(black bar) can't stay in the bottom of the page. Im still new into CSS so not very sure the problem, probably doing wrong in "float" or "clear:both".

thanks in advance and will be very much appreciate!