CSS - Trouble Putting A Div Behind Another Div

ss

I am a beginner with CSS, so if this question is stupid, please don't pay it too much mind. I am attempting to put a heading in the center of my page around a navigation bar that I have floating to the left, but it is not working. When I clear the float, it is stuck in one spot below the float. I cannot position the heading where I want. And if I try to use a div align, I get it off center and pretty much unmovable. If I use positioning on the header, I can only move it up and down, not into the center. So how can I counter that pesky floating nav bar?

hi, yea I got an a link wrapped around an image, but the image is coming up with tis weird pink border around it, anyon know how I can get rid of this border?

thx

Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away. The images are not links. I have basically covered every option in CSS to eliminate the problem with no prevail my CSS:

Code:

body img{ padding: 0; border:none; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 #000;   -moz-box-shadow: 0 0 0 #000; text-decoration: none; outline:none; overflow: hidden; }

Hopefully someone has encountered this before or has some information to help?

Hi
I have a problem with tables and divs
consider this table and divs:
<TABLE>
<TR>
<TD>
<DIV STYLE='hieght:30px'>
text
</DIV>
<DIV STYLE='position:relative;top:-30px;height:30px'>
text
</DIV>
</TD>
</TR>
</TABLE>

if I don't put position:relative;top:-30px; inside the second div the height of table would be around 60px (you say) as expected but when I put position:relative;top:-30px;, I would expected to have my table shrinks to 30px not the same 60px because I put two divs on the top of each other.

Obviously for one reason or another my assumption isn't correct. So how do I amend the code to get a correct height of table?

Perhaps I can use tables in this way?

Hi guys,

For a pure CSS site, is it depreciated to have a border="0" tag in <img elements? (My reasoning is that if one browser doesn't support CSS, it will show the user images with ugly borders... that's anyway the default behavior in IE and FF).


Thank you

Link he rpisolution dot com/test/

Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues.

btw, i know the CSS is probably ugly. sorry about that.

thanks

This is my css file : BODY { font: 11px geneva, verdana, arial, sans-serif; color: #89A1BD; }
TH{ font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; }
A:active { font: 11px geneva, verdana, arial, sans-serif; color: #00000; text-decoration: none; }
A:hover { font: 11px geneva, verdana, arial, sans-serif; color: #0000FF; text-decoration: underline overline; }
A:link { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration: none; }
A:visited { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration:none; }

#poll{ ;border-style : solid ;border-color : #004f9d ;border-width : 2px}
#poll tr td dt{font-family: Small Fonts;font-style : normal ;font-size : 7pt; font-weight :bold }

select, input, textarea { font: 10px geneva, verdana, arial, sans-serif; color: #3D3D3D; }
.pn-top {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title:link { color:#FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-title:active { color:#FFFFFF; FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-title:hover { color:#0000FF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title:visited { color:#CC0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}

.pn-link {BACKGROUND: none; COLOR: #0000000; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-link:link { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-link:active { color:#FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-link:hover { color:#0000FF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: underline overline}
.pn-link:visited { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}


.date {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif; TEXT-DECORATION: none}

body {
SCROLLBAR-FACE-COLOR: #B7C6E5; SCROLLBAR-HIGHLIGHT-COLOR: #D3DCEF; SCROLLBAR-SHADOW-COLOR: #738FCC; SCROLLBAR-3DLIGHT-COLOR: #E9EEF8; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #E5EBF4; SCROLLBAR-DARKSHADOW-COLOR: #4870AA;
; background-color: D8E0E9
}
FONT { font: 11px geneva, verdana, arial, sans-serif; color: #0000000; }
TD { font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; ; top: 20pt; clip: rect( )}



And my text is just normal black en when i go over it , it will turn blue it always works perfect if theres no link specified ex. when "href" is empty then it works but if its links.html and that page exitst then it stays black when i go over it , i've tried much changes in my css sheet but it doensn't seems to work

OK, I thought I was so smart. Working on a site that is 100% CSS AND Priority 3 WAI compliant, and thought I had it - it looked good on PC IE, Mozilla and Safari...only to be shot down by Mac IE 5.5, which I know is a bit of a black sheep in terms of CSS. Can those of you with knowledge of such things take a look at:

http://www.getbrightstar.com/v2/

And let me know why Mac IE 5.5 wouldn't float the columns correctly? The tricky part is that *I* don't have a mac and can't find an IE 5.5 emulator online like safari, but my client DOES have one and she uses IE 5.5, so it would be best if I could get it right the first time...I don't want to use my client for compatibility testing.

Thanks,
-Daniel

Hi, i have a simple bit of code which is a div that contains lots of rectangular images in one big row. I was these images to flow through the div so that they appear above and below each other if need be.

Quote:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="testcss.css" />
</head>

<body>
<div id="wall2">
<a href="index.php?page=unsold&bid=6"><img class="unsold" alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a> <!-- ........ (and so on for a abitary number of images) -->
</div>
</body>

</html>


And the css....

Quote:
body{margin:0px;padding:0px;background:white;color:black;font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif; width:1024px; border-right:dotted 1px #DE7008;}
a{color:blue; border:0; padding-bottom:0px; padding-top:0px;}
a:hover{color:#DE7008;}
img { border:0; padding-bottom:0px; padding-top:0px;}
div#wall2{top:30px;left:90px; width:900px; height:600px; position:absolute; float:right; padding:0px; }
img#unsold {border:0px; padding:0px; margin:0px;}


The code above works great with Firefox, but with IE6 it loops the pictures fine until the last line where it inserts a padding between the top of the last images and the bottom of the last but one row.

Ive searched and googles but cant figure it out. Anyone got any ideas how i can get this to appear correct for both browsers.

The code is XHTML and CSS validated.

Gareth.

Hi All,

Just in the middle of designing a website for my personal hobbies.

I have used alot of CSS to create the layout of the page.

The problem being it looks perfect in Firefox, Opera, Seamonkey etc etc BUT NOT IE!!!

In IE it is all over the place, nothing is where it should be.

I checked my CSS against w3 validator, and it came back with a few errors, so i decided to fix them... it then looked even worse... in ALL BROWSERS! So i decided to go back to how i had it originally.

The site in question is my username.

You can access the css stylesheet file by adding /test.css to the end of the domain name.

Any information, or anyone else had problem like this?

All the best for now,

Mike

after just getting my site fixed up, I have encountered a small problem with the divs, where the middle div (the main content) just ignores the right div (where im going to put adds). I was hoping someone could take a quick look at it and tell me how i could fix this small problem.

http://funnyguys99.tripod.com/index.htm
There are better details of the errors on my page, if you didn't quite get the problem.

Hey I have a dashed border to the right of my menu, i was wondering how i can make it reach the bottom of my page, without having to fill up all the content
example of what it looks like:

Navigation |
|
link |
link |
link |


Example of what i want it to look like

Navigation |
|
link |
link |
link |
|
|
|
|
|
bottom of page.

This is the Css code:

DIV#sidebar
{
LEFT: 0px; WIDTH: 12em; POSITION: absolute; TOP: 0px; HEIGHT: auto; BORDER-RIGHT: black 1px dashed;
}

Code:

<div class="message">
  <table>
    <tr>
      <td>Hello World</td>
    </tr>
  </table>
</div>

Code:

div.message
{
   border: 1px solid #000000;
}

For some reason that does not produce a border around the div. Is there a reason why not?