Hello,
I wonder if someone can help please.
I've created this CSS layout, and I really cannot see what's wrong with it. In Internet Explorer when sized at 800x600 resolution, the left and content blocks "touch" each other. At a larger resolution, gaps around the left blocks are incorrect, I've mentioned links of two screenshots to show you what I mean regarding the two blocks touching each other.
The blocks touching each other can be seen at <!-- m --><a class="postlink" href="http://www.bshantiques.com/a.jpg">http://www.bshantiques.com/a.jpg</a><!-- m -->
You can see the "gaps" i'm talking about being wrong on large resolutions at <!-- m --><a class="postlink" href="http://www.bshantiques.com/prob.jpg">http://www.bshantiques.com/prob.jpg</a><!-- m -->
The URL of the site is <!-- m --><a class="postlink" href="http://www.bshantiques.com">http://www.bshantiques.com</a><!-- m -->
CSS file: <!-- m --><a class="postlink" href="http://www.bshantiques.com/images/190704.css">http://www.bshantiques.com/images/190704.css</a><!-- m -->
Thanks in advance if you can spot anything wrong with the CSS to help me resolve this annoying issue!
Regards,You seem to have 8px left and right margins dotted around the place, perhaps thay could be to blame.#leftside {
margin: 13px 0 0 8px;
float: left;
width: 19%;
}
#content {
margin: 13px 8px 8px 21%;
border: 1px solid #5b69a6;
}I would have to agree with Lava. If you wan't the 'blocks' to touch, then the adjacent sides of the 'blocks' will need a 0px margin.Hiya.
How would you suggest doing it then?
If I remove all the 8px's from the CSS, then the edges will touch teh sides of the page, in essence it should look like this screenshot taken from Konqueror - that looks totally right.
I'm really sorry to trouble you with this, and all the screenshots, it's just a better way, in my opinion to describe the issue.
<!-- m --><a class="postlink" href="http://www.bshantiques.com/konq.png">http://www.bshantiques.com/konq.png</a><!-- m -->
Thanks.Originally posted by Teach
How would you suggest doing it then?
If I remove all the 8px's from the CSS, then the edges will touch teh sides of the pageTry it, see what happens.
Originally posted by Teach
<!-- m --><a class="postlink" href="http://www.bshantiques.com/konq.png404'd.Remove">http://www.bshantiques.com/konq.png404'd.Remove</a><!-- m --> the adjacent margins, not all of them. Example == The left block's RIGHT margin is adjacent the right block's LEFT margin.Hiya.
Yeah sorry about that.
I meant the .png extension, not .php, it's been a long day and just doing this site as a favour to a friend.
Post edited.
I'll give it a shot now without the 8px's.
Thanks.Okay, that's worked fine, removing all the 8px's
Only thing now though is, how do I get that "margin" around the entire page like on that screenshot?
I cannot add margin to the body, because the header and footer don't need a margin, just those pieces within them... hmm...Well you'd put a left margin on the left column, a right margin on the right column and then a top and bottom margin on both columns.Hiya.
Yeah tried that. Seems to come out exactly the same as before...
I used:
#leftside {
margin-top: 10px;
margin-left: 8px;
float: left;
width: 19%;
}
#content {
margin-top: 10px;
margin-left: 21%;
margin-right: 8px;
border: 1px solid #5b69a6;
}
Weird...
Ah, I think I see what's happening here. The left column is position:absoluted and has a width of 19% then the main content has a left margin of 21% to keep it away. Since you're mixing percents and pixels there is no sure fire way to get the two to touch.
You'll either have to use all pixels or all percentages.Ahh right... Thank you.
From the CSS below, which would I need to change from px to %?
Thanks again for your help, and I'm sorry to be a nusiance.
I'm glad you can see what's up with it... I think staring at it for so long as made me go blind with it now!
body {
margin: 0;
padding: 0;
background-color: #fff;
color: #000;
font-family: Tahoma, Bitstream Charter, Trebuchet MS, helvetica, sans-serif;
font-size: 10pt;
min-width: 750px;
}
#head {
background-color: #b5bece;
text-align: left;
}
#head h1 {
margin: 0;
padding: 13px;
font-size: 16pt;
font-weight: normal;
font-family: Trebuchet MS, Bitstream Charter, Tahoma, helvetica, sans-serif;
letter-spacing: 1px;
}
#topnav {
background-color: #f5f5f5;
border-width: 1px 0px;
border-color: #5b69a6;
border-style: solid;
text-align: right;
}
#topnav p {
margin: 0;
padding: 0;
}
#leftside {
margin: 13px 0 0 8px;
float: left;
width: 19%;
}
.left h4 {
margin: 0;
padding: 4px;
background-color: #b5bece;
border-width: 0 0 1px 0;
border-color: #5b69a6;
border-style: solid;
font-size: 10pt;
text-align: center;
}
#content h4 {
margin: 0;
padding: 4px;
background-color: #b5bece;
border-width: 0 0 1px 0;
border-color: #5b69a6;
border-style: solid;
font-size: 10pt;
text-align: left;
}
.left {
margin-bottom : 10px;
border: 1px solid #5b69a6;
}
.leftcontentnav {
padding: 8px;
text-align: left;
background-image: url('/images/grad.gif');
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
}
.leftcontent {
padding: 8px;
text-align: center;
background-image: url('/images/grad.gif');
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
}
#content {
margin: 13px 8px 8px 21%;
border: 1px solid #5b69a6;
}
#maincontent {
padding: 5px 15px 15px 15px;
text-align: center;
background-image: url('/images/grad.gif');
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
}
.spacer {
clear: both;
height: 10px;
font-size: 1pt;
}
#footermargin {
margin: 0;
padding: 0;
clear: both;
height: 10px;
background-color: #b5bece;
border-width: 1px 0px;
border-color: #5b69a6;
border-style: solid;
}
#footer {
margin : 0;
padding : 6px;
background-color : #f5f5f5;
text-align : center;
}
#footer p {
margin: 0;
}
.nav {
padding: 0 0 5px 0;
border-width: 0 0 1px 0;
border-color: #b5bece;
border-style: solid;
}
.box {
padding: 10px;
border-width: 1px 0 1px 0;
border-color: #b5bece;
border-style: solid;
}
tr.tabletitle , td.tabletitle {
background-color: #DEE3E7;
}
td.row1 {
background-color: #f5f5f5;
}
td.row2 {
background-color: #DEE3E7;
}
tr , td {
text-align: center;
}
ul li {
list-style-type: square;
}
a:link , a:visited {
color: #333;
}
a:hover {
color: #333;
border-bottom: 1px dashed #333;
border-top: 1px dashed #333;
}
input , textarea , select {
font-size : 10pt;
font-family: Tahoma, Bitstream Charter, Trebuchet MS, helvetica, sans-serif;
}
input.nav {
width : 100px;
}
.title {
font-size: 14pt;
font-weight: normal;
font-family: Trebuchet MS, Bitstream Charter, Tahoma, helvetica, sans-serif;
letter-spacing: 1px;
}
img {
border : 0;
}
form {
margin: 0;
}At a guess:#leftside {
margin-top: 10px;
margin-left: 1%;
float: left;
width: 19%;
}
#content {
margin: 10px 1% 8px 20%;
border: 1px solid #5b69a6;
}No guarentees because the pixel borders might throw things off even more, but give it a whirl.Thanks lavalamp.
Yep seems to have thrown it even more off.
This is indeed a weirdy...It's at times like this when I find a different layout technique is needed, you can use the one attached, or I could keep struggling against the current trying to fix this one.
It's up to you.thanks, giving this a shot now!
edit: that layout seems fine in konqueror, but looks completely wrong in firefox and IE.
Hmmm... I'm off to bed for a bit now, working tomorrow and it's almost 3am... so much for simple CSS layouts. :wink:
I really thought it'd be something simple with the CSS we've got - very odd why the %'s and px's are causing the problems described.
Lavalamp thank you very much for all your assistance tonight, it's much appreciated.
Regards,Originally posted by Teach
that layout seems fine in konqueror, but looks completely wrong in firefox and IE.Hmm, it's fine for IE and FF on Windows.Hiya.
Been playing with this for a few hours now, to no avail.
I really don't know who to resolve it, I've tried altering the %'s, padding and marins but to no avail...
Basing it on that layout lavalamp kindly posted doesn't seem to look right in Ie/Ff...
Any help greatly appreciated.
Regards,You got a link to a page where it's not look right?Originally posted by lavalamp
You got a link to a page where it's not look right?
Hiya lavalamp, thanks for your continued support...
I don't I'm afraid, I can certainly put it back up though and post the link.
Basically, using that layout and applying it actually made it worse... do you not think there's an easy way to fix the original CSS we have, or is it difficult to pinpoint and fix?
Thanks again.
Rgds,Generally, I find it less difficult to re-code something than to pinpoint errors in an already buggy method.
I have found that one needs to be very specific in their CSS classes and ID's; specify values for everything that could exist in the element that is being styled. Never rely on browser defaults, because no 2 browsers will use the same defaults. Perfect Example: IE defaults that overflow is automatic (overflow: auto; ) but any Mozilla or Gecko core browser defaults overflow to hidden. In short, TELL the browser what you want it to do, do not allow it to guess.Originally posted by PhillMc
Mozilla or Gecko core browser defaults overflow to hidden.You sure? :SHiya.
Been playing again with both layouts...and with that new one you kindly posted lavalamp, the left touches the side, and it actually ends up looking worse.
With some research it seems it's a problem in IE with double margins, and seems quite complex to fix from my original CSS (which is beyond me)... so I'll guess i'll try to simplify the original layout on Monday when I get a spare few hours as this is only a favour for a family friend...
Thanks a lot.
Regards,Originally posted by lavalamp
You sure? :S
I should rephrase that. lol. FF and NS will display all the contents of the div, but will not resize the div. But my point, I believe, is still valid: Don't rely on browser defaults
I wonder if someone can help please.
I've created this CSS layout, and I really cannot see what's wrong with it. In Internet Explorer when sized at 800x600 resolution, the left and content blocks "touch" each other. At a larger resolution, gaps around the left blocks are incorrect, I've mentioned links of two screenshots to show you what I mean regarding the two blocks touching each other.
The blocks touching each other can be seen at <!-- m --><a class="postlink" href="http://www.bshantiques.com/a.jpg">http://www.bshantiques.com/a.jpg</a><!-- m -->
You can see the "gaps" i'm talking about being wrong on large resolutions at <!-- m --><a class="postlink" href="http://www.bshantiques.com/prob.jpg">http://www.bshantiques.com/prob.jpg</a><!-- m -->
The URL of the site is <!-- m --><a class="postlink" href="http://www.bshantiques.com">http://www.bshantiques.com</a><!-- m -->
CSS file: <!-- m --><a class="postlink" href="http://www.bshantiques.com/images/190704.css">http://www.bshantiques.com/images/190704.css</a><!-- m -->
Thanks in advance if you can spot anything wrong with the CSS to help me resolve this annoying issue!
Regards,You seem to have 8px left and right margins dotted around the place, perhaps thay could be to blame.#leftside {
margin: 13px 0 0 8px;
float: left;
width: 19%;
}
#content {
margin: 13px 8px 8px 21%;
border: 1px solid #5b69a6;
}I would have to agree with Lava. If you wan't the 'blocks' to touch, then the adjacent sides of the 'blocks' will need a 0px margin.Hiya.
How would you suggest doing it then?
If I remove all the 8px's from the CSS, then the edges will touch teh sides of the page, in essence it should look like this screenshot taken from Konqueror - that looks totally right.
I'm really sorry to trouble you with this, and all the screenshots, it's just a better way, in my opinion to describe the issue.
<!-- m --><a class="postlink" href="http://www.bshantiques.com/konq.png">http://www.bshantiques.com/konq.png</a><!-- m -->
Thanks.Originally posted by Teach
How would you suggest doing it then?
If I remove all the 8px's from the CSS, then the edges will touch teh sides of the pageTry it, see what happens.
Originally posted by Teach
<!-- m --><a class="postlink" href="http://www.bshantiques.com/konq.png404'd.Remove">http://www.bshantiques.com/konq.png404'd.Remove</a><!-- m --> the adjacent margins, not all of them. Example == The left block's RIGHT margin is adjacent the right block's LEFT margin.Hiya.
Yeah sorry about that.
I meant the .png extension, not .php, it's been a long day and just doing this site as a favour to a friend.
Post edited.
I'll give it a shot now without the 8px's.
Thanks.Okay, that's worked fine, removing all the 8px's
Only thing now though is, how do I get that "margin" around the entire page like on that screenshot?
I cannot add margin to the body, because the header and footer don't need a margin, just those pieces within them... hmm...Well you'd put a left margin on the left column, a right margin on the right column and then a top and bottom margin on both columns.Hiya.
Yeah tried that. Seems to come out exactly the same as before...
I used:
#leftside {
margin-top: 10px;
margin-left: 8px;
float: left;
width: 19%;
}
#content {
margin-top: 10px;
margin-left: 21%;
margin-right: 8px;
border: 1px solid #5b69a6;
}
Weird...
Ah, I think I see what's happening here. The left column is position:absoluted and has a width of 19% then the main content has a left margin of 21% to keep it away. Since you're mixing percents and pixels there is no sure fire way to get the two to touch.You'll either have to use all pixels or all percentages.Ahh right... Thank you.
From the CSS below, which would I need to change from px to %?
Thanks again for your help, and I'm sorry to be a nusiance.
I'm glad you can see what's up with it... I think staring at it for so long as made me go blind with it now!
body {
margin: 0;
padding: 0;
background-color: #fff;
color: #000;
font-family: Tahoma, Bitstream Charter, Trebuchet MS, helvetica, sans-serif;
font-size: 10pt;
min-width: 750px;
}
#head {
background-color: #b5bece;
text-align: left;
}
#head h1 {
margin: 0;
padding: 13px;
font-size: 16pt;
font-weight: normal;
font-family: Trebuchet MS, Bitstream Charter, Tahoma, helvetica, sans-serif;
letter-spacing: 1px;
}
#topnav {
background-color: #f5f5f5;
border-width: 1px 0px;
border-color: #5b69a6;
border-style: solid;
text-align: right;
}
#topnav p {
margin: 0;
padding: 0;
}
#leftside {
margin: 13px 0 0 8px;
float: left;
width: 19%;
}
.left h4 {
margin: 0;
padding: 4px;
background-color: #b5bece;
border-width: 0 0 1px 0;
border-color: #5b69a6;
border-style: solid;
font-size: 10pt;
text-align: center;
}
#content h4 {
margin: 0;
padding: 4px;
background-color: #b5bece;
border-width: 0 0 1px 0;
border-color: #5b69a6;
border-style: solid;
font-size: 10pt;
text-align: left;
}
.left {
margin-bottom : 10px;
border: 1px solid #5b69a6;
}
.leftcontentnav {
padding: 8px;
text-align: left;
background-image: url('/images/grad.gif');
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
}
.leftcontent {
padding: 8px;
text-align: center;
background-image: url('/images/grad.gif');
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
}
#content {
margin: 13px 8px 8px 21%;
border: 1px solid #5b69a6;
}
#maincontent {
padding: 5px 15px 15px 15px;
text-align: center;
background-image: url('/images/grad.gif');
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
}
.spacer {
clear: both;
height: 10px;
font-size: 1pt;
}
#footermargin {
margin: 0;
padding: 0;
clear: both;
height: 10px;
background-color: #b5bece;
border-width: 1px 0px;
border-color: #5b69a6;
border-style: solid;
}
#footer {
margin : 0;
padding : 6px;
background-color : #f5f5f5;
text-align : center;
}
#footer p {
margin: 0;
}
.nav {
padding: 0 0 5px 0;
border-width: 0 0 1px 0;
border-color: #b5bece;
border-style: solid;
}
.box {
padding: 10px;
border-width: 1px 0 1px 0;
border-color: #b5bece;
border-style: solid;
}
tr.tabletitle , td.tabletitle {
background-color: #DEE3E7;
}
td.row1 {
background-color: #f5f5f5;
}
td.row2 {
background-color: #DEE3E7;
}
tr , td {
text-align: center;
}
ul li {
list-style-type: square;
}
a:link , a:visited {
color: #333;
}
a:hover {
color: #333;
border-bottom: 1px dashed #333;
border-top: 1px dashed #333;
}
input , textarea , select {
font-size : 10pt;
font-family: Tahoma, Bitstream Charter, Trebuchet MS, helvetica, sans-serif;
}
input.nav {
width : 100px;
}
.title {
font-size: 14pt;
font-weight: normal;
font-family: Trebuchet MS, Bitstream Charter, Tahoma, helvetica, sans-serif;
letter-spacing: 1px;
}
img {
border : 0;
}
form {
margin: 0;
}At a guess:#leftside {
margin-top: 10px;
margin-left: 1%;
float: left;
width: 19%;
}
#content {
margin: 10px 1% 8px 20%;
border: 1px solid #5b69a6;
}No guarentees because the pixel borders might throw things off even more, but give it a whirl.Thanks lavalamp.
Yep seems to have thrown it even more off.
This is indeed a weirdy...It's at times like this when I find a different layout technique is needed, you can use the one attached, or I could keep struggling against the current trying to fix this one.
It's up to you.thanks, giving this a shot now!
edit: that layout seems fine in konqueror, but looks completely wrong in firefox and IE.
Hmmm... I'm off to bed for a bit now, working tomorrow and it's almost 3am... so much for simple CSS layouts. :wink:
I really thought it'd be something simple with the CSS we've got - very odd why the %'s and px's are causing the problems described.
Lavalamp thank you very much for all your assistance tonight, it's much appreciated.
Regards,Originally posted by Teach
that layout seems fine in konqueror, but looks completely wrong in firefox and IE.Hmm, it's fine for IE and FF on Windows.Hiya.
Been playing with this for a few hours now, to no avail.
I really don't know who to resolve it, I've tried altering the %'s, padding and marins but to no avail...
Basing it on that layout lavalamp kindly posted doesn't seem to look right in Ie/Ff...
Any help greatly appreciated.
Regards,You got a link to a page where it's not look right?Originally posted by lavalamp
You got a link to a page where it's not look right?
Hiya lavalamp, thanks for your continued support...
I don't I'm afraid, I can certainly put it back up though and post the link.
Basically, using that layout and applying it actually made it worse... do you not think there's an easy way to fix the original CSS we have, or is it difficult to pinpoint and fix?
Thanks again.
Rgds,Generally, I find it less difficult to re-code something than to pinpoint errors in an already buggy method.
I have found that one needs to be very specific in their CSS classes and ID's; specify values for everything that could exist in the element that is being styled. Never rely on browser defaults, because no 2 browsers will use the same defaults. Perfect Example: IE defaults that overflow is automatic (overflow: auto; ) but any Mozilla or Gecko core browser defaults overflow to hidden. In short, TELL the browser what you want it to do, do not allow it to guess.
Originally posted by PhillMc Mozilla or Gecko core browser defaults overflow to hidden.You sure? :SHiya.
Been playing again with both layouts...and with that new one you kindly posted lavalamp, the left touches the side, and it actually ends up looking worse.
With some research it seems it's a problem in IE with double margins, and seems quite complex to fix from my original CSS (which is beyond me)... so I'll guess i'll try to simplify the original layout on Monday when I get a spare few hours as this is only a favour for a family friend...
Thanks a lot.
Regards,Originally posted by lavalamp
You sure? :S
I should rephrase that. lol. FF and NS will display all the contents of the div, but will not resize the div. But my point, I believe, is still valid: Don't rely on browser defaults