hi guys,
i been playing around with this and reading other posts and i cant seem to figure it out??
now i have this navigation div
#left {
width: 185px;
float: left;
}
.payment_pics{
float: left;
margin-top: 10px;
margin-left: 31px;
}
#navcontainer {
width: 190px;
position: relative;
}
#navcontainer ul {
margin: 0;
padding: 15px 0 0 0;
list-style-type: none;
font: bold 12px/19px Verdana, Arial, Helvetica, sans-serif;
text-indent: 30px;
letter-spacing: 1px;
position: relative;
}
and this content div
#content {
width: 505px;
float:right;
padding: 15px 0 0 0;
}
now they have both padding: 15px 0 0 0; but they line up differently in FF. why is this??
here is the page: <!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/examples.php">www.deskjetmodels.co.nz/examples.php</a><!-- w -->
and here is the full css: <!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/css/model_1.css">www.deskjetmodels.co.nz/css/model_1.css</a><!-- w -->
thanx, very much appreicatedHi,
I think that your problem stems from this piece of code:
h2 {
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
width: 400px;
}
If you set both margin and padding to zero, this should be fixed.
I have recently been adding
h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
to my style sheets. This way there are no "suprizes".
Hope this helps,
Mikethanx mike,
i have done the changes to <h2> and added in
margin: 0;
padding: 0;
i also took away the top padding to get the content div aligned the same in IE and FF.
now FF looks fine, but IE does not. how can this be?
if i align FF correct, IE is out.
if i align IE correct, FF is out!
please help me and explain why.
very much appreciatedHere's my solution:
#content {
margin: 15px 0 0 0;
width: 505px;
float: right;
}
h2{
margin: 0;
}
#left {
margin: 15px 0 0 0;
width: 185px;
float: left;
}
#navcontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/19px Verdana, Arial, Helvetica, sans-serif;
text-indent: 30px;
letter-spacing: 1px;
position: relative;
}
I have tested in the following browsers (all mac):
IE........5.2.2
Safari....1.0.3
NN........7.2
FF........0.10.1
OP........7.54
I have removed padding from the <ul> and <h2>.
The top padding of the containing divs was then set to 15px.
This way, any element (with margin-top and padding-top both set to 0px) that you put inside of the content div should align with your nav ul.
NOTE: you should really check your code with the validator (especially when adding the link at the bottom of the page). It comes up with a couple errors, one of which is completely throwing your floats out of whack in safari. hint: close the 2nd <ul>
good luck,
Mike
PS I don't have access to IE win so I could not check the code with it.hey thank you so much for the help Wart_Hog,
ill will get on to it when i get home from work and let you know how i go.
when i started to do my first CSS website i first designed it for IE, never again will i make that mistake!Wart_Hog,
your help worked a charm!
except for, not sure if has anything to do with the help you gave me. but if you look here:
<!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/examples.php">www.deskjetmodels.co.nz/examples.php</a><!-- w -->
you will notice that the word "examples" start at differnt heights in IE and FF.
although, you said you could not try it in Win IE. so might not be showing up on yours.
also..
can you or anyone help me with my footer in IE and FF?
in FF the footer sticks?
im just about to clean up all the errors in my validation maybe that might fix it?
thanx
UPDATE: in regauding to the validation errors:
is this possible:
<li><input type="text" name="keyword" class="search_box">
<input type="submit" value="Search" class="search_btn"/></li>
giving me two errors but i have closed it. is it becuase it is in a list?Css_Calav,
Wart_Hog,
your help worked a charm!
except for, not sure if has anything to do with the help you gave me. but if you look here:
<!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/examples.php">www.deskjetmodels.co.nz/examples.php</a><!-- w -->
you will notice that the word "examples" start at differnt heights in IE and FF.
This is due to the fact that "exmples" is is enclosed by <p> tags. A paragraph (<p>) is a block-level element which, much like <h>, has margin properties already set for it. There are two solutions to this problem:
1.Alter your style sheet
p.class_name{
margin-top: 0;
padding-top: 0;}
Alter html:
<p class="class_name">examples</p>
2.Or, better yet, just alter your HTML: <span>examples</span>
As far as the form goes, would this work?:
<li><input type="text" name="keyword" class="search_box" /></li>
<li><input type="submit" value="Search" class="search_btn"/></li>
-Mikeyes mike that worked!
any pointers or help with the other probs?
much appriacted!Hi,
There doesn't seem to be anything wrong with your footer. Its doing exactly what you asked it to do, which is to display where the rest of your content ends. On your examples page, this is somewhere close to 2/3 0f the way down the screen. If you want the footer to apear closer to the bottom of the viewport, my advice would be to add a little more content. Maybe add a few more images, make the image larger, or add an over-all description of the models in the shopping cart.
If this is not the solution that your looking for, you could read an article (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/100percheight.html">http://www.quirksmode.org/css/100percheight.html</a><!-- m -->) that is very instructive with height 100%.
-Mikethanx for that mike,
although, in win IE the footer gets forced to the bottom of the page? how can this be explained?
one other thing that is stumping me is the paragraph text, or it could be the content div i am not sure.
but the text alighns differently in IE and FF. is that the same as yours mike on a mac?
in FF the text looks like it has a 10px approx top margin or padding.
thanx very much for your input!
will read that footer article when i get home from workHi,
Go here using IE win <!-- m --><a class="postlink" href="http://www.blackmarketculture.com/test/temp/index.html">http://www.blackmarketculture.com/test/temp/index.html</a><!-- m -->
I copied your page source and fixed it. If this displays correctly, then we have a solution.
How to change:
replace <p>examples</p>
with <span style="display: block; padding-bottom: 10px;">examples</span>mike, that has fixed that alignment prob sweet as in FF and IE!
thankyou for your time and help.
i wont be making changes tonight, but will get on to them asap,
i been playing around with this and reading other posts and i cant seem to figure it out??
now i have this navigation div
#left {
width: 185px;
float: left;
}
.payment_pics{
float: left;
margin-top: 10px;
margin-left: 31px;
}
#navcontainer {
width: 190px;
position: relative;
}
#navcontainer ul {
margin: 0;
padding: 15px 0 0 0;
list-style-type: none;
font: bold 12px/19px Verdana, Arial, Helvetica, sans-serif;
text-indent: 30px;
letter-spacing: 1px;
position: relative;
}
and this content div
#content {
width: 505px;
float:right;
padding: 15px 0 0 0;
}
now they have both padding: 15px 0 0 0; but they line up differently in FF. why is this??
here is the page: <!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/examples.php">www.deskjetmodels.co.nz/examples.php</a><!-- w -->
and here is the full css: <!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/css/model_1.css">www.deskjetmodels.co.nz/css/model_1.css</a><!-- w -->
thanx, very much appreicatedHi,
I think that your problem stems from this piece of code:
h2 {
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
width: 400px;
}
If you set both margin and padding to zero, this should be fixed.
I have recently been adding
h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
to my style sheets. This way there are no "suprizes".
Hope this helps,
Mikethanx mike,
i have done the changes to <h2> and added in
margin: 0;
padding: 0;
i also took away the top padding to get the content div aligned the same in IE and FF.
now FF looks fine, but IE does not. how can this be?
if i align FF correct, IE is out.
if i align IE correct, FF is out!
please help me and explain why.
very much appreciatedHere's my solution:
#content {
margin: 15px 0 0 0;
width: 505px;
float: right;
}
h2{
margin: 0;
}
#left {
margin: 15px 0 0 0;
width: 185px;
float: left;
}
#navcontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/19px Verdana, Arial, Helvetica, sans-serif;
text-indent: 30px;
letter-spacing: 1px;
position: relative;
}
I have tested in the following browsers (all mac):
IE........5.2.2
Safari....1.0.3
NN........7.2
FF........0.10.1
OP........7.54
I have removed padding from the <ul> and <h2>.
The top padding of the containing divs was then set to 15px.
This way, any element (with margin-top and padding-top both set to 0px) that you put inside of the content div should align with your nav ul.
NOTE: you should really check your code with the validator (especially when adding the link at the bottom of the page). It comes up with a couple errors, one of which is completely throwing your floats out of whack in safari. hint: close the 2nd <ul>
good luck,
Mike
PS I don't have access to IE win so I could not check the code with it.hey thank you so much for the help Wart_Hog,
ill will get on to it when i get home from work and let you know how i go.
when i started to do my first CSS website i first designed it for IE, never again will i make that mistake!Wart_Hog,
your help worked a charm!
except for, not sure if has anything to do with the help you gave me. but if you look here:
<!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/examples.php">www.deskjetmodels.co.nz/examples.php</a><!-- w -->
you will notice that the word "examples" start at differnt heights in IE and FF.
although, you said you could not try it in Win IE. so might not be showing up on yours.
also..
can you or anyone help me with my footer in IE and FF?
in FF the footer sticks?
im just about to clean up all the errors in my validation maybe that might fix it?
thanx
UPDATE: in regauding to the validation errors:
is this possible:
<li><input type="text" name="keyword" class="search_box">
<input type="submit" value="Search" class="search_btn"/></li>
giving me two errors but i have closed it. is it becuase it is in a list?Css_Calav,
Wart_Hog,
your help worked a charm!
except for, not sure if has anything to do with the help you gave me. but if you look here:
<!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/examples.php">www.deskjetmodels.co.nz/examples.php</a><!-- w -->
you will notice that the word "examples" start at differnt heights in IE and FF.
This is due to the fact that "exmples" is is enclosed by <p> tags. A paragraph (<p>) is a block-level element which, much like <h>, has margin properties already set for it. There are two solutions to this problem:
1.Alter your style sheet
p.class_name{
margin-top: 0;
padding-top: 0;}
Alter html:
<p class="class_name">examples</p>
2.Or, better yet, just alter your HTML: <span>examples</span>
As far as the form goes, would this work?:
<li><input type="text" name="keyword" class="search_box" /></li>
<li><input type="submit" value="Search" class="search_btn"/></li>
-Mikeyes mike that worked!
any pointers or help with the other probs?
much appriacted!Hi,
There doesn't seem to be anything wrong with your footer. Its doing exactly what you asked it to do, which is to display where the rest of your content ends. On your examples page, this is somewhere close to 2/3 0f the way down the screen. If you want the footer to apear closer to the bottom of the viewport, my advice would be to add a little more content. Maybe add a few more images, make the image larger, or add an over-all description of the models in the shopping cart.
If this is not the solution that your looking for, you could read an article (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/100percheight.html">http://www.quirksmode.org/css/100percheight.html</a><!-- m -->) that is very instructive with height 100%.
-Mikethanx for that mike,
although, in win IE the footer gets forced to the bottom of the page? how can this be explained?
one other thing that is stumping me is the paragraph text, or it could be the content div i am not sure.
but the text alighns differently in IE and FF. is that the same as yours mike on a mac?
in FF the text looks like it has a 10px approx top margin or padding.
thanx very much for your input!
will read that footer article when i get home from workHi,
Go here using IE win <!-- m --><a class="postlink" href="http://www.blackmarketculture.com/test/temp/index.html">http://www.blackmarketculture.com/test/temp/index.html</a><!-- m -->
I copied your page source and fixed it. If this displays correctly, then we have a solution.
How to change:
replace <p>examples</p>
with <span style="display: block; padding-bottom: 10px;">examples</span>mike, that has fixed that alignment prob sweet as in FF and IE!
thankyou for your time and help.
i wont be making changes tonight, but will get on to them asap,