PDA

View Full Version : Need Help lining up the pictures and descriptions ul and il list



christper2000
Jan 25th, 2009, 03:21 AM
Hi,
I am new to this forum and found it because I need help with a css problem I am having. I check every possible solution but I a not able to fix the problem.
here is the page that I need help with: http://faucettrend.com/Untitled-1.html
as you can see in Firefox, the pictures are touching the left and right side which is using the whole container :-) which is what I want for the links and descriptions , but you can see that the links and descriptions have an indent at the beginning. which I don't want. The css is in the html code. Will someone please help me with this little problem I am having.
P.S. In IE both the pictures and links, descriptions are intented . I don't know why this is happening. and I looked line by line but still can't fix the problem.

Thanks in advance.
Chris

christper2000
Jan 25th, 2009, 05:26 AM
I believe its the <ul> tag that indents it but does anyone know how to fix this?

Excavator
Jan 25th, 2009, 05:43 AM
Hello christper2000,
Shouldn't have to do this but it fixes it in FF3... not sure it works in all browsers -

li {
margin-bottom: .5em;
margin-left: -40px;
list-style-type: none;
text-align: left;
}

abduraooft
Jan 25th, 2009, 11:35 AM
Add
*{
margin:0; padding:0;
} in to your CSS, to remove all browser specific default margins and paddings from all elements. After that you could add the specific values for the required elements.

oesxyl
Jan 25th, 2009, 11:45 AM
I test Excavator solution in FFox 2.0 and works.

a better solution is to use global css reset at top of your css declaration:


* { margin: 0; padding: 0; }


best regards

Excavator
Jan 25th, 2009, 07:04 PM
I test Excavator solution in FFox 2.0 and works.

a better solution is to use global css reset at top of your css declaration:


* { margin: 0; padding: 0; }


best regards
Good catch abduraooft & oesxyl,
In his CSS he has the margin/padding set to 0. He doesn't use the universal *, but lists each tag seperately with this line:
body, div, dl, dt, dd, ul ol, il, h1, h2, h3,h4, h5, h6, pre,from, fieldset, input, p, blockquote, th, td
{ margin:0; padding:0; }


Your right, *{margin:0;padding:0;} is better though, because it targets the li that is not in his list.
My mistake for missing that one! I should have read closer what he was targeting in that list.

That saves using negative margins too.

christper2000
Jan 26th, 2009, 12:12 AM
I test Excavator solution in FFox 2.0 and works.

a better solution is to use global css reset at top of your css declaration:


* { margin: 0; padding: 0; }


best regards



thanks let me try that and I'll let you know if it works

christper2000
Jan 26th, 2009, 12:16 AM
thanks everyone for your help
The " * { margin: 0; padding: 0; } " works

thanks again :-) keep up the good work helping other just like me

christper2000
Jan 26th, 2009, 12:18 AM
one question, how to I reset the font size ?

oesxyl
Jan 26th, 2009, 06:02 AM
one question, how to I reset the font size ?
add a font-size, font-family, or what ever you need.

anything you put in global reset will increase the loading time of the page so it's better to keep it small, only declaration common for browsers.
because of that and because you don't style text outside of body it's better to reset font in the body.


body { font-family: ....; font-size: ...; }

use a absolute unit in body, pt for example, and relative in the rest of the site.
best regards