CSS - Hi And Straight In With A Problem

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!

Hi, I am a newbie to css and have attempted to convert various webpages to css over the past few months. Although I am new to css I have been working on computers (programmer and user) for the last 13 years.

My main observation is that css is being limited by the inability or lack of interest on the part of browser developers to ensure that all pages are rendered the same in all browsers. It is very frustrating to work hard on a complicated layout only to open the page from another browser and have all your hard work look as if it has been through the spin cycle.

Of course such criticisms apply in other circles, for example different compilers handling c/c++ code is slightly different ways. For a programmer working on code to run him/herself this is not so serious since you get the code to work on the machine you want it to run on, with webpages we don't have that luxury.

Any thoughts?

R Haynes

i'd like to align my table to the left, i ve tried so many stuff but cant get it....
in html
something like this

<table width="75%" border="0" align="left">

what is the css way of getting this result...

pls help me out...

So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem.
I have tried so many hacks. And now I am at a loss of ideas,time and mind.
the site is
woodbuiltright
com
/
index-alpha1
php

It seems the "E-Page" Div does not expand to contain everything.

I have tried clearing divs but I must be missing something.
Thanks

In IE6 my page is not lining up like it is supposed to. The left navigation is not sitting flush against the footer or main content DIV. I have tried a clearing DIV after the main content, but still can't get it to stay flush against the footer. It looks fine in IE7, FireFox, and Safari. Can anyone help me with this?? I would appreciate it!

Here is my CSS code
Code:

body {
	background-image: url(../images/bgs/bg_try_02.jpg);
	background-repeat: repeat;
	margin-top: 0px;
	margin-bottom: 0px;
}


.container {
	background: transparent;
	width: 1000px;
	padding-top: 0px;
	margin: 0px auto;
}
.banner {
	background: url(../images/banner.jpg);
	height: 245px;
	width: 1000px;
	margin: 2px auto 4px;
	padding-bottom: 0px;
	padding-top: 0px;
}
.left_col {
	background: url(../images/bgs/left_col_bg_03.jpg) repeat-y;
	float: left;
	height: 623px;
	width: 200px;
	margin: 1px auto 0px;
	padding: 1px 0px 0px;
}
.pipe {
	background: url(../images/bgs/images/pipe_bg_03.jpg) repeat-y center;
	text-align: center;
	height: 622px;
	width: 200px;
	margin: 0px auto;
	padding-bottom: 2px;
}

.right_col {
	background: #FFFFFF;
	float: right;
	width: 786px;
	height: 620px;
	padding: 1px 9px 2px 5px;
	margin: 1px 0px 0px;
}
.footer {
	background: url(../images/bgs/footer_02.jpg) repeat-x;
	padding-bottom: 15px;
	margin: 0px auto;
	padding-top: 5px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	height: 75px;
	clear: both;
}
.border_2 {
	background: url(../images/bgs/border2.gif) repeat-x;
	height: 14px;
}
.clearfix {
	clear: both;
	visibility: hidden;
	font-size: 1px;
	line-height: 0px;
	height: 0px;
}

.border_1 {
	background: url(../images/bgs/border1.gif) repeat-x;
	height: 14px;
}
.bg_color {
	background: url(../images/bg_color_02.jpg) repeat-x;
	height: 768px;
}
.bus_border {
	background: url(../images/bgs/border2.gif) repeat-x;
	height: 14px;
	width: 140px;
}
.floatright {
	float: right;
	margin: 4px;
	clear: right;
}
.btn1 {
	background: url(../images/btns/left_bg_nav.jpg);
	height: 65px;
	width: 200px;
}
.btn2 {
	background: url(../images/btns/left_bg_nav.jpg);
	height: 65px;
	width: 200px;
}
.btn3 {
	background: url(../images/btns/left_bg_nav.jpg);
	height: 65px;
	width: 200px;
}

Hello all,
Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help!

my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user)

ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage.

The custom div look like this:
#container {
background: #FFF url(../images/bkg_container.png) repeat-y;
min-height: 100%;
width: 1190px;
margin: 0 auto;
padding: 0 14px 0 14px;
}

#header {
background: url(../images/bkg_header.png);
height: 127px;
width: 1160px;
margin: 0;
padding: 15px 0 0 30px;
}

#menu-top-bkg {
background: url(../images/bkg_menu_top.png) no-repeat left top;
height: 128px;
width: 1190px;
margin: 0 0 -128px 0;
}

#wrapper {
overflow: auto;
background: url(../images/bkg_menu.png) repeat-y left;
min-height: 500px;
width: 1190px;
margin: 0;
padding: 0;
}

#menu {
float: left;
background: none;
min-height: 370px;
width: 159px;
margin: 0;
padding: 110px 0 0 0;
}

#content {
float: right;
background: url(../images/bkg_content.png) no-repeat right top;
min-height: 400px;
width: 763px;
margin: 0 0 0 25px;
padding: 15px 243px 10px 0;
}

#menu-bottom-bkg {
background: url(../images/bkg_menu_bottom.png) no-repeat;
height: 141px;
width: 1190px;
margin: -111px 0 0 0;
}

#footer {
background: url(../images/bkg_footer.png);
height: 100px;
width: 1190px;
margin: 0;
padding: 16px 0 0 0;
}

I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec.

I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly!
Many thanks to all,
doodlebug

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;
}

Need to know how the pull down menu and a browse button could take a style like


http://www.discovertravel.no/


i tried to make it but it did not work on firefox... so can anyone help me to make this style coz it appears well in firefox.

I have a big problem with css in both IE and FF I don't know what's going on i'm making a navigation menu with submenu from some elements when i display the submenu from the element the square bullets isn't displayed beside the list item from the submenu and it's required in firefox and even the hover effect isn't displayed correct in FF also and it's displayed in IE correctly and in some page the conetnt was wholy distroyed in IE and display correct in FF with it's bugs and in dream weaver the design is going ok and i'm using a strict DTD i don't know what's wrong and what's going on ???

I am sorry, I can't show the page as an example as it is a clients website.

Basically the problem is the box model (I think).

In IE the background file loads fine, but in FF it doesn't.

It is a box inside a box, inside a box.

I have tried

body #divname

html # divname

html > divname

and all other selector variants I can think of to no avail.

I was wondering if this is a known problem. I thought it might be z-indexing but div's inside the affected div are picking up their background images.

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;
   }

Hey guys.

I made a little news script for my site, but if I submit more than 1 news "article" IE doesn't style it. It will style the first article though. In FF everything is fine... If you view it in firefox you will see what im talking about.

To see it visit http://www.leetwebmasters.com/beta_site/test2/

Where it says "THIS TEXT SHOULD BE GRAY", that part is the title and everything on that line should be gary, then below it is the news, "meh".

Here is my code:
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>Untitled Document</title>
<link rel="stylesheet" href="styles/style.css" />
</head>

<body>
<div id="container">
<div id="topbanner"><img src="images/topbanner.gif" /></div>
<div id="mainbanner"><img src="images/mainbanner.gif" /></div>


<div id="navbox">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<!-- END NAVBOX -->
</div>


<div id="viewnews">
<?php
include('');
$query = "SELECT * FROM articles LIMIT 4";
$rs = mysql_query($query) or die (mysql_error());


while($row = mysql_fetch_object($rs)) {
print "<div class=\"title\">";
print "Title: ".$row->title ." | Submitted on: ". $row->date . " | Submitted by user: ". $row->submitted_by;
print "</div>";

print "<div class=\"news\">";
print "News submitted:<br /> ".$row->news;
print "</div";
}
?>
</div>


<!-- END CONTAINER -->
</div>
</body>
</html>

CSS:
Code:

#container
{
width:950px;
margin:auto auto;
}
#mainbanner
{
clear: both;
}

#viewnews
{
float: right;
width:750px;
height:450px;
}

.title {
float: right;
background-color:#D6D6D6;
width:750px;
height:35px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

.news
{
background-color:#F5F5F5;
}

#navigation
{
float: left;
width: 200px;
}

#navigation ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
}

#navigation li { 
	border-bottom: 1px solid #828282; 
}

#navigation li a:link, #navigation li a:visited {
    font-size: 90%; 
    display: block; 
    padding: 0.4em 0 0.4em 0.5em; 
    border-left: 12px solid #828282;
    border-right: 1px solid #828282;
	background-color:#939393; 
	color:#EDEDED;
	text-decoration: none; 
	}
	
#navigation li a:hover {
	background-color:#AAAAAA;
}

Can someone please help me? I can't figure out what is wrong

I have a really annoying issue with IE6. I've gotten the page to work properly for any other browser (FF, Safari, IE7, Opera), but IE6 screws the way the page looks.

Can someone please give me some ideas as to how to change the CSS or HTML so that I fix this problem but at the same time don't cause problems with other browsers?

sbcclending.com/test/

Thanks
RG

I have two pages that are giving me problems, only in IE of course. On the first,
http://www.jaypaulstudio.com/galler...ure/summer.html or even http://www.jaypaulstudio.com/galler...eachdancer.html
I think the difference in margins causes the problem, but the scroll bar extends outside of the bounds of the page (the blue part).

The second,
http://www.jaypaulstudio.com/galler...ture/budda.html
is different; I cannot make the page contents left align without breaking everything else in the content.

My style sheet is he http://www.jaypaulstudio.com/main.css

Any solutions or suggestions would be much appreciated. Even a good site on how to hack css for IE...

Sarah

Hi, I am having an issue using my CSS code, I have a drop down section on my menu bar on my site.

I'm trying to firstly just set the background of the whole bar,

Code:

#nav-m {
  font: normal 12px Verdana;
  font-weight: bold;
  width: 100%;
}
  
	#nav-m ul {
	  float: left;
	  left: 0;
	  padding: 2px 0;
	  text-decoration: none;
	  text-indent: 5px;
	}
  
	  #nav-m a {
		  display: block;
		  width: 10em;
		  w\idth: 6em;
		  color: #012345;
		  text-decoration: none;
		  padding: 0.25em 2em;
	  }
  
	  #nav-m a.daddy {
	  }

	  #nav-m li {
		  float: left;
		  padding: 0;
		  background-image: url(http://taxbusters.eu.com/images/nav-bar1.jpg);
		  background-repeat: no-repeat;
	  }

	  #nav-m li ul {
		  position: absolute;
		  left: -999em;
		  height: auto;
		  width: 14.4em;
		  w\idth: 13.9em;
		  font-weight: normal;
		  border-width: 0.25em;
		  margin: 0;
	  }
  
	  #nav-m li li {
		  padding-right: 1em;
		  width: 13em
	  }

	  #nav-m li ul a {
		  width: 13em;
		  w\idth: 9em;
	  }

	  #nav-m li ul ul {
		  margin: -1.75em 0 0 14em;
	  }
	  
	  #nav-m li:hover ul ul, #nav-m li:hover ul ul ul, #nav-m li.sfhover ul ul, #nav-m li.sfhover ul ul ul {
	  left: -999em;
	  }
	  
	  #nav-m li:hover ul, #nav-m li li:hover ul, #nav-m li li li:hover ul, #nav-m li.sfhover ul, #nav-m li li.sfhover ul, #nav-m li li li.sfhover ul {
	  left: auto;
	  }

	  #nav-m li:hover, #nav-m li.sfhover {
	  background: #bdd7e6;
	  }

however the background doesnt show up, and the font alignment isnt right, - there are so many problems

http://alturl.com/nfkp