CSS - Fill Horizontal Space

any body know what i need to add to this CSS to get the 2px looking white space that sits to the left of each <li>?

Code:

<ul id="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">View Cart</a></li>
</ul>

Code:

#navlist li {
font-size: 12px;
font-family: Helvetica, Times, serif;
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
border-right: 1px solid black;
background-color: #D5DED9;
}

EDIT: Realized this is not an HTML issue. If a mod could move this to the CSS forum I would appreciate it. Thanks

Please take a look at this page:

http://www.4xp.net/template2/

I cannot get the space under the horizontal nav bar to go away. It has to do with the image links, because if I remove then and put plain text in there, that space goes away. It only happens in IE, the space isnt there in FF.

Here is my css

PHP Code:
 body {
    margin-top: 5px;
    margin-bottom: 5px;
    background-image: url('images/bg.jpg');
}

#header {
    width: 900px;
    height: 90px;
    padding: 0;
    margin: 0;
    text-align: left;
    background-image: url('images/header_bg.jpg');
}

img {
    padding: 0;
    margin: 0;
}

#menu {
    border-top: 1px solid #003366;
    border-bottom: 1px solid #003366;
    width: 100%;
    height: 25px;
    background: url('images/menu_bg.jpg');
    background-repeat: repeat-x;
    text-align: left;
}

.menulink {
    margin-left: 20px;
    height: 25px;
}

#page {
    width: 900px;
    border: 1px solid #000000;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#status {
    width: 900px;
    height: 25px;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #003333;
    margin: 0;
    padding: 0;
    border: 0;
} 





Any help would be very much appreciated. Thanks everyone!

Hi,

I have the following code and under the main menu, it's a space as you can see under Contact for example for the entire menu.
If I want to move down the menu with margin-top, the bottom will exceed the bottom of logo.png image.

How do I insert an image here ?
http :// imageshack.us/photo/my-images/600/44485569.jpg/


this is css code

body {
margin: 0;
padding: 0;
border: solid 1px black;
}

#nav {
position: relative;
margin: 0px auto;
width: 960px;
padding: 10px 0px 10px 0px;
border: solid 1px red;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: Georgia;
font-size: 21px;

}

ul a {
text-decoration: none;
padding-left: 25px;
padding-right: 25px;
display: block;
color: #843bbb;
}

ul a:hover {
color: #bd66ff;
}

ul a:visited {
color: orange;
}

li {
float: left;
}

How can I achieve same positioning with logo on left side, menu on right side, and I want somehing like an add in the middle using float and divs and not a table ?

Thanks.

Hi Everyone,

I'm new to the forum and somewhat new to CSS.

I am developing a simple webpage that has a horizontal unordered list serving as a navigation bar.

Firefox adds what looks like about 20px of extra space above and below the entire list while internet explorer shows it aligned top left.

Eventually I would like to center the unordered list top and bottom, but I can't seem to get any alignment formatting to work at all.

Here is the problem code:
Code:

<div id="navbox">
	<ul id="navbar">
    <li><a href="index.html">HOME</a></li>
    <li><a href="http://showrooms.canadatrader.com/7010/7622">INVENTORY</a></li>
    <li><a href="formapp.html">APPLY NOW</a></li>
    <li><a href="mailto:rjtria@gmail.com">EMAIL ME</a></li>
   </ul>
  </div>

And the corresponding CSS:
Code:

#navbox {
	background-color: #B1C5D0;
	height: 50px;
	width: 760px;
	overflow: visible;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #333;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
	color: #036;
	font-weight: bold;
	font-size: 130%;
	font-family: "Courier New", Courier, monospace;
	line-height: normal;
}
#navbar li {
	display: inline;
	list-style-type: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	padding-right: 10px;
	padding-left: 10px;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

I know it's not much.. but it's making me crazy.
I have tried zeroing out all padding / margins to no avail...

Any help would be greatly appreciated!!
Thanks in advance!
Celeste

Ok, I'm rather new to CSS and there is one thing I have always struggled with. If you have a containing div and two divs inside, is there a way to make one of the divs extend to fill the remainder of the space in the containing block. I have had times when I've wanted to do this both width-wise and height-wise.

A width example would be if you had a containing block with a width of 500px and two divs floated next to each other. The first div is 100px wide. Is there a way to have CSS automatically set the other div to 400px without manually setting it?

A height example would be if you have four divs in a containing div, stacked in two columns. The content in the left column is longer than the content in the right column. Now, is there a way to stretch the bottom div in the right column to fill the space down to the left column?

Suppose I have the following script that creates a div element and set its width and height to fill the whole screen:

Code:

<script type="text/javascript">
	var oDiv = document.createElement('div');
	oDiv.style.width = window.screen.availWidth + "px";
	oDiv.style.height = window.screen.availHeight + "px";
	//oDiv.style.width = window.screen.width + "px";
	//oDiv.style.height = window.screen.height + "px";
	oDiv.style.border = "solid 1px #ccc";
	document.body.appendChild(oDiv );
</script>

well, the code above actually does the job, BUT a scrollbar (vertical and horizontal) is also created ... how to get rid of the scrollbars?

I'm (noobishly) developing a site and want a menubar of fixed size at the top, with the remaining area of the window filled with a div containing the scrolling content.

It's height should be effectively 100% - size of menubar.

When I tried 100% height it natually was the full screen height, but then the whole page is full screen height plus the height of the menu bar.

Does anyone know how to size a div to meet my needs?

i put a div container around all my divs (so i could center them and put a bg and border) and put height at 100% but it only stretches from the top of the viewable page to the bottom. if a text content div stretches beond the page (and i have to scroll) the main content div cuts off. i set body height to 100% also. i cant figure out a way around this other than set the height in PX but since the content will be includes i have no way of know how much will be on each page. is there anyway around this, even if i have to use tables.

Pretty Common issue.... I think...

I need my div's background to go all the way down the page.... even on small pages!!

Here is an example...

Sign Up Page

if you didnt understand the subject i'll try and explain it a bit better here!

This is my problem in IE my page looks like this
http://www.readyflowers.com.au/div-fill.gif

But what i want is when there is no content for those divs not to appear so it would look like this (In firefox it works!)
http://www.readyflowers.com.au/div-fill-firefox.gif

How do i set a font outline color as red and the fill with white using css. Does anyone know?

I just can't do it!!!! I need help on this..

My header.. I can't get rid of the spaces around the image..

hmm check this out.. I can't post a link direct but its on the world wide web at
piedmontred (dot) com

firebug is telling me its an element.style margin, but for the life of me I can't find that in any CSS sheet I have.. and for some reason firebug doesn't identify a sheet either..

I did buy this wordpress template and have done quite a bit of CSS hacks, but I just can't figure this one out..

Thanks for any help!!
Todd

I have read and read through the CSS2 spec and I am unable to figure out if this is possible. Hopefully I can describe it well enough for somebody to help out.

Okay, what I want to accomplish seems simple. I want a div, lets call this one "container", with a calculated height/width relative to the document (in terms of percentage). Inside this div will be another div, lets call it "header", whos width will span the length of the containing div (100%) and height is fixed, lets say 30px. Now here comes the tricky part... a third div, lets call it "content" should sit right underneath "header" and its width will also be 100% of the containing div, but the height should fill the remainder of the containing div. I can't seem to get the "content" div to fill the remainder of "container" and scroll when needed. If I specify a calculated height, the offset of the "header" div is not taken into account so "content" div does not fit properly.

Thanks a ton if you can help me out. Please let me know if this doesn't make sense.

Hi there,
I'm making a CakePHP application to display my friend's artwork. I'm having trouble with the style sheet though. The header and footer are made of two fading images. I've used the background image property to stretch these images to fill the divs and have made the divs stretch to fill the width of the page.

At this point it's probably easiest to see what I mean by taking a look for yourself-

http://www.seb.webege.com/paintings/gallery

If you view this page in Chrome or Firefox then you'll see the desired effect with the image filling the width of the page. The problem comes with Safari and IE. In these browsers the image does not stretch to fill the screen.

I am not an expert at HTML/CSS and can't for the life of me work out what has gone wrong or what I can do to fix it, after numerous google searches I'm still none the wiser and I'm just not seeing the problem.

Can anyone advise me how to get the images to stretch to the browser width in Safari and Explorer? Any help would really be appreciated.

Many thanks,

Nick

I've exhausted my own knowledge toolbox and cannot get this to work. I'm trying to get a div to expand to the end of the parent div.

http://www.pictouunited.com/?s=null

You'll see what I mean. I've done all the logical troubleshooting, or so I thought.

I appreciate any help in advance!