CSS - First Css Positioning, Can't Get It To Work

http://www.drowninginmytears.org/invalid/

it works in internet explorer, however in firefox, it is i believe 3px off (the main header and navigation), can anyone figure out why? i've been stumped now for hours. thanks

my css is:

http://www.drowninginmytears.org/invalid/css.css

I have a table with 680px in width & trying to fit my img into the table. I'v tested it both in 1024x768 & 1280x1024. But it just doesn work. When i position it to match my 1024x768, it'll look bad at 1280x1024..

here is my positioning code :
img.one{ position:absolute; top:325px; left:550px; }

why is that so...

Hi all,

Im doing a bit of work, for which the URL can be found at:

(URL address blocked: See forum rules)~gj311/webeng

and the css is at

(URL address blocked: See forum rules)~gj311/webeng/webeng.css

Ignore the lack of content for now if you would (URL address blocked: See forum rules)=newthread&f=116#
Smilie

I am trying to make the "top" div appear at the top of the page with no gap, currently this works in IE but in firefox 2 and opera there is a gap showing the lighter bluey/grey background colour, is this because I am using width 100%?

It is probably a very newbish question but any help would be appreciated.

Cheers

Hi all,

I'm trying to get the two <ul> tags in div#header to sit on top of each other (horizontally), and for both of them to sit next to the <h1> title tag.

The problem is that the second <ul> floats left underneath the <h1>.

Any suggestions?

Relevant HTML:

Code:

<div id="header">
	<h1>Athena:</h1>
	<ul>
  		<li><a href="library.php" alt="Browse Library">Library</a></li>
		<li><a href="project.php" alt="Browse Projects">Projects</a></li>
		<li><a href="personal.php" alt="Browse Personal Section">Personal</a></li>
	</ul>
	<br />
	<ul>
		<li><a href="" alt="">Subhead1</a></li>
		<li><a href="" alt="">Subhead2</a></li>
	</ul>	
</div>

Relevant CSS:

css Code:
Original - css Code #header { width:98%; margin:0px auto; background-color: #2E5C8A; border:solid #2E5C8A; 2px; border-width: 0px 5px 0px 5px; color:#fff; padding:5px; } #header a { text-decoration:none; color:#fff; } #header a:visited { text-decoration:none; color:#fff; } #header h1 { font-size: 3em; margin: 0px; display:inline; } #header ul { list-style-type: none; display: inline; } #header li { vertical-align: top; display: inline; padding: 0px 5px 0px 5px; margin: 0px 5px 0px 5px; border:solid #49496e 1px; background-color:#8699ad; font-size: 1em; font-weight: bold; } #header ul li:before { content: "\2606 \0020"; } #header li:hover { border:solid #fff 1px; background:#49496e; } #header ul li:hover:before { content: "\2605 \0020"; }

  

  


 #header


 {


     width:98%; 


     margin:0px auto; 


     background-color: #2E5C8A; 


     border:solid #2E5C8A; 2px; 


     border-width: 0px 5px 0px 5px; 


     color:#fff; 


     padding:5px; 


 }


  


 #header a


 {


     text-decoration:none; color:#fff;


 }


 #header a:visited


 {


     text-decoration:none; color:#fff;


 }


 #header h1


 { 


     font-size: 3em; 


     margin: 0px; 


     display:inline; 


 }


 #header ul


 { 


     list-style-type: none; 


     display: inline;  


 }


 #header li


 {


     vertical-align: top;


     display: inline;


     padding: 0px 5px 0px 5px;


     margin: 0px 5px 0px 5px;


     border:solid #49496e 1px;


     background-color:#8699ad; 


     font-size: 1em;


     font-weight: bold;


 }


  


 #header ul li:before


 { 


     content: "\2606 \0020"; 


 }


  


 #header li:hover


 {


     border:solid #fff 1px; 


     background:#49496e;


 }


 #header ul li:hover:before


 {


     content: "\2605 \0020"; 


 } 

Also - is there anyway of getting the <li>'s to be the same width?

Thanks heaps,
--Simon

Hello,
I have a flash movie that keeps moving out of place when the browser size is altered. How can I make it so the movie stays in one spot no matter what the browser size?

Hello friends,

Need some help with CSS layer positioning, which for the last couple of days has been the cause of much frustration. I am updating my site, and am converting some of my code to be more semantic. The test page, which looks 'right' is here.

The semantic version, which now places the footer and sidebar within their own divs is here (I have removed the javascript and other text to keep things as simple as possible):

The problems I am experiencing:
The side bar, shaded blue for clarity is now 'outside the box', see the first link to see how it should be; There is a gap between the bottom of the extra div and the top of the footer div; The positioning of the sidebar is affecting the header/nav - try mousing over 'contact';
In short, I am trying to convert my existing layout to this, but can't seem to get there.


Here is what I am striving for:

Code:

|------------------------------------
|              Navigation            |
|------------------------------------
|Breadcrumbs <p>                     |
-------------------------------------
|                        |           |
|        Content         | Sidebar   |
|                        |           |
-------------------------------------
|             Optional Extra         |
-------------------------------------
|                      Footer        |
-------------------------------------

Any help much appreciated!

If you view the following site in Firefox

http://mtm324php.info/nasdaq.xml

you can see this...

NASDAQ 100
Current quotes
then the date

because this is the order of the data in the XML document...

Well let's suppose I want it like this...

http://mtm324php.info/nasdaq.bmp

with the date on the very top.

How would I do this in CSS? It has to be in CSS as that is the requirement.

Thank you.

Hello,

I've got a div tag that I want to position tags off of using css's margin attribute. The data amount is variable, so sometimes the tags that position off of the first tag end up in different locations depending on the amount of data placed in the div tag. I've tried setting a static height attribute, but it doesn't appear to work for me.

Any ideas?

can somebody help me align this UL to the bottom right of this table. i put valign="bottom" and align="right" but it didn't work, i tried to put padding and margins in the CSS to move it over and it just won't work. any help would be greatly appreciated.

HTML Code:

<table id="products_page" border="0" cellpadding="0" cellspacing="0" width="800">
<tr id="upper_nav" height="198">
<td valign="bottom">
<ul class="navlist">
<li> <a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Shipping Information</a></li>
<li><a href="contact_us.html">Return Policy</a></li>
<li style="border-right:none;"><a href="showcart.cfm">ViewCart</a></li>
</ul>
</td>
</tr>
</table>


Code:

.navlist li {
font-size: 12px;
font-family: Helvetica, Times, serif;
display: inline;
list-style-type: none;
padding: 0px 10px;
border-right: 1px solid black;
float: left;
position: relative;
}

#upper_nav {
background-image:url('http://lonepineprairiepillows.com/Cart/cw3/Assets/cart_images/base_page.jpg');
background-repeat: no-repeat;
}

I have inputted some css popup text on roll over for some social bookmarking buttons on a new blog skin. (pkevan.blogspot) The problem I am having is placing where they pop-up. I can't use an absolute position because who knows where a post will be along with multiple posts. Right now there floating underneath the icons at the left hand side. I want the text to appear to the right of the icons inline with them. I'm having trouble positioning them there though. Any help, or properties that might be useful will be greatly appreciated. Thanks in advance. Heres what I have applied so far.


div#socialbookmarks a span {display: none;
}

div#socialbookmarks a:hover span {display: block;
float: left;
position: inline; top: 0px; left: 0px; width: 20px;
padding: 0px; margin: 0px; z-index: 0;
color: #4AAAFA; background: transparent;
}

Can somebody help me. I have been dealing with IE6 bugs for awhile, and I know that IE6 has trouble with floating divs. I have listed the code below. It would be easier to look at the page on the website because it is very simple, but I am not allowed to post a URL

Why does IE6 push the "main" div (yellow) down below everything.
If I make the width 874px it takes its normal place just under the red "top" div, but it does not stretch all the way to the edge of the blue "container" div. It looks perfect in IE7, Firefox.
Can anybody tell me why?

Thanks so much in advance,
Mike

Code:

<style type="text/css">
body {background-color: #CCCCCC;}
#container {width:980px;height:1000px;margin:0px auto 0px auto;background-color:#0000FF;padding:0;} 
#top {height:81px;width:980px;background-color:#FF0000;padding: 0px;}
#leftColumn {float:left;background-color:#8781bd;height:5001px;width:103px;z-index: 20;border-bottom:1px solid #000;}
#main {margin:0;padding:0;float:left;height:500px;width: 877px;background-color:#FFFF00;}
</style>
</head>
 
<body>

<div id="container">
<div id = "top"></div>

<div id = "leftColumn">
</div>	<!--end of #leftColumn-->
<div id="main">
</div>
</div>

thanks for taking the time to read my question.

I have a div that I want to float right, but it is staying on the left side, and I can't figure out why.

HTML:
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">
<head>
<meta name="description" content="Warren Persowich Humour Facilitator - Stand-Up Comedian Winnipeg Manitoba. Comedic entertainment performances laughter and insight. Fun professional development. A decade of stand-up experience." />
<meta name="keywords" content="Warren Persowich, Comedian, Comedic, Stand Up, Stand-Up, Comedy, Business, Winnipeg, Manitoba, Cancer, Entertainment, Funny, Hilarious, Interactive, Laughter, Psychology, Professional, Development" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" /> 
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>

<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><a href="Index.htm"><img class="Logo" src="Images/WOMENSHOCKEY CHOICE 1Small2.jpg" alt="Two Nations Female Hockey League"></a></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<div class="prop"></div>
<div class="Welcome">
	<p class="FirstLine">Welcome to the Two Nations Female Hockey Leage web site.</p>
	<p>The Two Nations Female Hockey Leage is a Spring - Summer league that is comprised of female hockey teams hailing from both Canada and United States.</p>
	<p>To learn more about the Two Nations Female Hockey League, click <a href="AboutUs.htm">here</a> or use the About Us link in the navigation bar above.</p>
</div>
<div class="TNFHLTW">
	<p class="TNFHLTWP">This week in the TNFHL the Coyote's and On Edge faced off in Winnipeg, Manitoba. The teams skated to a 3 all tie.</p>
</div>
<div class="Banners">
	<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
	<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
</div>
<div class="clearprop"></div>
</div>
<div class="BottomNavDiv">
	<div class="BottomNavDivCont">
		<p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
	</div>
</div>
</body>
</html>

CSS:
Code:

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.LogoDiv {
/*background-image:url("Images/WOMENSHOCKEY CHOICE 1Small2.jpg");
background-repeat: no-repeat;
background-position: top left;*/
margin: 2px auto;
padding: 0px;
height: 87px;
width: 800px;
display: block;
}

img.Logo {
border: 0px;
}

.Banners {
float: right;
width: 300;
margin: 20px 20px 0px 0px;
padding: 0px;
background-color: red;
 /*clear: both;*/ 
}

.BannerCont {
width: 300;
height: 50px;
margin: 5px 0px 0px 0px;
padding: 5px 0px 0px 0px;
background-color:#362161;
}


.NavDiv {
background-image: url(Images/N2NavBar2.jpg);
background-repeat: repeat-x;
background-position: top left;
padding: 10px 0px 0px 0px;
margin: 0px 0px -13px 0px;
height: 80px;
width: 100%;
display: block;
}

.TeamsNav {
padding: 0px;
margin: 0px 0px 0px 400px;
font-size: 12px;
}

/*.prop and .clearprop are in here to create a min height of 400px*/
.prop {
height: 400px;
width: 1px;
float: right;
background-color: yellow;
}			 

.clearprop {
clear: both;
height: 1px;
overflow: hidden;
background-color: yellow;
}

.ContentDiv {
width: 800px;
/*height: 400px;*/
overflow: hidden;
background-image:url(Images/Background-Blue3.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 0px auto;
padding: 0px;
display: block;
position:static;
z-index: -1;
}

.TNFHLTW{
width: 212px;
overflow: hidden;
background-image:url(Images/TNFHLThisWeekShortNarrow.gif);
background-position: top left;
background-repeat: no-repeat;
margin: 50px 0px 0px 30px;
padding: 50px 0px 0px 0px;
}

.Welcome {
float: right;
margin: 10px 20px 0px 0px;
overflow: hidden;
width: 450px;
background-color: aqua;

}

.FirstLine {
font-size: 20px;
margin: 0px;
padding: 0px;
text-align: center;
}

.COC1 {
padding: 2px;
margin: 50px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}

.COC {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}

.OLHolder {
margin: 10px 0px 0px 30px;
padding: 2px;
float: left;
width: 700px;
}

.COCOL li {
margin-bottom: 10px;
}

.COCTitle {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-size:18px;
}

.LinkList li {
margin-top: 10px;
list-style-type:none;
}

p.TNFHLTWP {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 4px;
margin: -20px 0px 0px 0px;
font-size: 12px;
background-color: #ffffff;
}

.BottomNavDiv {
padding: 0px;
height: 72px;
width: 100%;
display: block;
border-top: 4px solid red;
margin: 0px;
height: 25px;
}

.BottomNavDivCont {
margin: 0px auto;
width: 800px;
overflow: hidden;
display: block;
height: 25px;
padding: 0px 0px 0px 20px;
}

/*.BottomNavDivCont ul li {
display: inline;
padding: 0px 10px 0px 0px;
font-size: 10px;
color: #ff0000;
margin: 0px;
}*/

.BottomNavLinkP {
font-size: 10px;
color: #ff0000;
display: block;
}

.BottomNavLink {
font-size: 10px;
color: #ff0000;
}

a.BottomNavLink:link{
text-decoration: none;
}
a.BottomNavLink:visited{}
a.BottomNavLink:hover{
text-decoration: underline;
}
a.BottomNavLink:active{}

p.TeamsNav a:link{
text-decoration: none;
color: #000099
}
p.TeamsNav a:visited{}
p.TeamsNav a:hover{
text-decoration: underline;
}
p.TeamsNav a:active{}

.LinkList li a:link {
text-decoration: none;
color: #000099;
}
.LinkList li a:visited {}
.LinkList li a:hover {
text-decoration: underline;
}
.LinkList li a:active {}

I put clear:both on .Banners but then it moves to the bottom under .prop I'd like .Banners to be under .Welcome

The page displays the same in FF and IE7, but in IE6 .Banners stretches across most of the .ContentDiv

help?

CSS is very new to me so if someone can help me with my problem i would very much appreciate it.

I am using a background image that is 1024 x 768px. I have positioned this using...

Code:

body
{
background-color:#000000;
background-image:url('images/homebg.jpg');
background-repeat:no-repeat;
background-position:center top;
} 

As i am new to css i am using tables to position my content over the top of the background image. If the browser is adjusted in size the content appears to be going over the edge of the background image instead of staying with in it.

is there any way i can lock the 2 (background image and content) in position so that when the browser is made smaller or the site is viewed in different resolutions it will remain together without the content going over the edge of the background.

Or am i doing this wrong. I have read about wrappers and such but i don't really understand them.

An example of what i am trying to achieve is at www.blue-leaf.co.uk

Hi guys,

I'm pretty new to web design, so please be gentle.

I have an issue with CSS positioning that I'm trying to figure out. After research, I figured out how to align a div to the centre using an external stylesheet. However, I want this div to be positioned at the very top of the page. Currently, it sits approx 100px from the top and I can't figure out how to position it to 0px.

Here's my code;

body { text-align: center; margin: 5em 0 0 0; vertical-align: middle; }
#content {
width: 760px;
text-align: left;
margin: 0 auto;
background-color: #000000;
top: 0px;
}

Can anyone help me?

Thanks
Luke

I am a beginner and I'm having trouble with getting the paragraph elements to behave the way I want them to in the header section of the page at the link below. I have the address paragraph staying in position. The hours paragraph, however, doesn't seem to be contained by the header div. It moves to the left as the browser window is resized to be larger. I tried adding right margin to the address paragraph but the hours paragraph doesn't seem to recognize that either. I know I'm doing something wrong but I can't seem to figure out what. The small weather widget has a similar, but not quite the same, problem. It moves to the right.

(openrangeimaging(dot)com/Test/Gravity-Test/index-test01.html) I got an error saying I couldn't include links. I read the forum rules and didn't notice anything about that. Hope I'm not breaking the rules here.

I'm hoping someone with css expertise can help me get this set up correctly.

>>EDIT<< I was, (by luck), able to achieve what I wanted by adding the position: relative to the #container div. The file in link above has been updated with this change.


I am a beginner at css. I aspire to have the most "correct" and cleanest code and conform to best practices. If what I have done is still not best practice and should be done in a different way I definitely want to know how it should be styled. Can anyone comment on if what I have done is proper technique? >>End Edit<<

Thanks in advance for any help.