2 css problems with my site

[Sharkadder]

Hi i have 2 problems with css which i am trying to work around. I will explain brielfly and give some of my code.the first problem is to do with lists, i have css code where it positions a list within a div tag, for some reason if the list goes onto another line it starts off from where the bullet begins. How can this be solved so it starts off inline with the other text? my code for this is as follows:.postcontent{ background-image:url(images/postmiddle.gif); background-repeat: repeat-y; padding: 20px 0px; display:inline; float:left; margin-left:10px;}.postcontent ul{ list-style-position: inside; list-style-type: disc; padding: 0px 0px 0px 20px; color:#666666;}.postcontentul li{ padding-top: 5px; color:#666666;}.postcontent ul li a{ text-decoration:none; padding: 0px; text-transform: uppercase;}.postcontent ul li a:hover{ text-decoration:underline; text-transform: uppercase;}Ok my second problem is to do with a menu footer on my form, in IE6 it displays as it should underneath the verticale menu's on either side of the page. On firefox it displays in the centre of the page where the element in the middle finishes in height.How can i get the horizontal footer navigation to display under the menu's on the left and right but in the centre of the screen as IE shows, instead of in the centre underneath the element in the middle of the screen.Here is my footer code:.postfooter{ background-image:url(images/postbottom.gif); background-repeat: no-repeat; display:block; width:450px; height:15px;}/********************* footer ****************************/#footer{ width:850px; background-image:url(images/background2.gif); background-repeat: repeat-x; background-color: #000000;}#footer ul{ display:block; margin-left:170px; margin-top:20px;}#footer ul li{ display:inline; text-align:center; margin:auto; width:auto; border-right: 1px solid #6b7272;}#footer ul li a{ display:inline; text-align:center; text-decoration:none; padding: 0px 10px; text-transform: uppercase;}#footer ul li a:hover{ text-decoration:underline;}#footer span{ color:#525757; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-align:center; width:850px; display:block; padding: 15px 0px;}thanks, hope somebody can help me out here to first get the list to begin at the start of the text if more than 1 line is needed. Also to stop my footer menu bar being displayed underneath the middle content and underneath the menu's on either side.Some pictures of what i mean for the horizontal navigation are shown here:IE6FF

[rzea]

I didn't understand the first problem. Do you have a link we can visit?Regarding your second problem, actually your CSS is not the issue, is your HTML (it would be great to have a link to be able to copy your HTML code here).What you need to do to bring that footer down is to put a DIV at the bottom of the container DIV before the closing bracket </div> with a clear:both; property.Here's an example of what I mean, you're going to have to adapt it to your code:HTML:

<div id="container">All your website content here......<div class="clear"></div></div>

CSS: Add this class to your CSS file.

.clear {   clear:both;}

Let us know how it goes.

[Sharkadder]

thanks for the reply it is apprechiated.Ok at the end of my container just before the footer i put in the code:<div class="clear"></div>the problem now is my image is out of line on the footer in firefox, where as in IE it is not out of line. I however did already have the clear code you mentioned within my css stylesheet.The list problem i speak of was to do with positioning. If i write a list of element's it will be displayed perfectly fine, if i choose to display a list of elements where some elements within the list go onto the next line it looks odd and out of shape.if you go to my demo page at www.sharkadder.com/dreamboxsales you can see exactly what i mean on both occurances. firslt the image is now out of sync with the footer text, this might be due to me putting the clear div tag in the wrong place for firefox, i'm sure you can view my source and clear that one up. Rather than me posting lines of code on here. The list problem you will notice if you go to my terms page within my website. If a list element has multiple lines the text on the next line doesn't start in line with the text on the line above, it will start from where the bullet marker is, any idea's how i can get that text to start inline with previous lines text?thanks

[rzea]

Hello Sharkadder,I took some time to look at your footer issue, but to put time in trying to fix your list issues I need to see the problem, right now, I see your left menu list fine. It's up to you.So as I said, I took the time to look at your footer issue and there's just too much code to understand how it's linked, so instead of trying to put out a fire I suggest you rewrite your footer HTML and CSS code. On your CSS for the footer I see many unnecessary classes like the entire #footer ul class:

#footer ul{ display:block; margin-left:170px; margin-top:20px;}

There's no need to display:block the <ul> since the links are the ones that need to be display:block. The margin-left:170px; is not really needed if you want to center the navigation in the footer, with a text-align:center; in the <ul> is enough.So, if you want to give it a try to a cleaner code, here it is:HTML:

<div id="footer">  <ul>	<li><a href="#">Item one</a></li>	<li><a href="#">Item two</a></li>	<li><a href="#">Item three</a></li>	<li><a href="#">Item four</a></li>	<li class="no-border"><a href="#">Item five</a></li>	<p>Copyright © Dreambox Sales 2008 All rights reserved.</p>  </ul></div>

CSS:

#footer {	color:#ccc;	font:1em normal Arial, Helvetica, sans-serif;}#footer ul {	width:100%;	background:url(images/background2.gif) repeat-x #000;	text-align:center;	font-family: arial, helvetica, sans-serif;	padding:0;	margin:0;}#footer ul li {	display: inline;}#footer ul li a {	padding:0 10px;	color:#ccc;	text-decoration:none;	border-right:1px solid #6b7272;	text-transform:uppercase;	font-size:.8em;	font-weight:bold;}#footer ul li.no-border a {	border-right: none;}#footer ul li a:hover {	text-decoration:underline;}#footer p {	font-size:.8em;	color:#666;	}

Here's one of the most useful links I've ever had in my Bookmarks for Web Design, it teaches you EVERYTHING you need to know about lists, no Web Designer should live without this link: http://css.maxdesign.com.au/index.htmHope this helps.Let me know then.

[Sharkadder]

thanks for that my footer code is now working properly. I modified your code a little too so that the copyright notice was in the very centre of the page.The reason i have left space on either side of the screen is for if people have lower resolution monitors but in this age many people now use settings with 1000+ in width.Back to this list problem, the site you mentioned i did look at and i had looked at it before. Amazingly none of his list examples go onto another line, by that i mean bullet 1 will stay on line 2, bullet 2 stays on line 2 etc.For my list some bullets are multiple lines in length and therefore the text on the second line of the bullet needs to be aligned with the text on the line above.An example of what i mean is shown here:

• bullet1 - this list element only has one line of text, so it doesn't matter about another line
• bullet2 - this list element has multiple lines of textas you can see, line 2 does allign with the previous lines text, on my website it doesn't, it starts from the bullet instead

that shown above is what i am trying to do, get a list element that has more than 1 line to align with the first character of the previous line, instead of the start of the bullet. I guess theres probably some css code or something to pad it in a bit more. Maybe you get what i mean now and can understand. On my site the second line of text seems to align itself with the bullet, unlike it does on this website. Again my website link is in the previous post, the page where what I've mentioned happens is shown on the "terms" page. You can get to it by clicking "terms" on the horizontal menu bar.thanks man

[rzea]

I'm glad the code for the footer worked for you... however, I still see the old code on the link you provided Now, about your lists issue... these are your problems?

.postcontent ul{	list-style-position: inside;		...

and

.menu ul{	list-style-position: inside;		...

Remove those properties.Check this explanation in W3Schools.com (which BTW is another link a Web Designer can not live without): http://www.w3schools.com/CSS/pr_list-style-position.asp » Use the demo, go to the "Try-It-Yourself Demos" section and click on the link.There you go.Let me see your site with all the fixes when you're done Bytes,

[Sharkadder]

thank you dude, the code was all to do with me needing to change inside for outside.Thanks for the help buddy. As for the code which you told me to delete which is still there. some of it i had to rearrange again so that it worked. For example the final <p> underneath the footer horizontal bar was not in line, so i had to modify the code slightly.As you can see my code is now in fully working order. I have sorted the list problem out now as mentioned by putting outside instead of inside for the list style position within CSS.Thank you very much for the help, i know you said to delete it all together but i'll leave that code in just incase, as i don't want to mess my layout up, it is very delicate. I now see why people prefer just basic HTML website which are compatible with all browsers lol.thanks for the help........p.s. i like your "bytes" instead of bye

[rzea]

Yes, you can put outside, but that would be redundant since that's the default property of lists, so deleting the property altogether will reduce your amount of code... it'll be more optimized.Glad to help :)Let us know if you have any more problems.Bytes again.