PDA

View Full Version : Browser Discontinuity and Padding in Floating Div


joesp
11-11-2008, 03:21 AM
To begin, I'm relatively clueless to html concepts and have a graphics background with no web experience. I'm an architect, as in houses, not the web! I am trying to get a site up and running for my wife.

The site I have created, however inneficient in technical design, seems to work just fine in IE. However, doesn't seem to work as well in Firefox, Safari or Chrome. Below is a link to an unactive page I am hoping to use as a template for a more efficient site, once I have the following issues resolved:

http://www.silversaltmarketing.com/ssm_master_template.html

I have found the following problems:

Firefox:
The main content text is shifted all the way to the left of the white box, but everything else looks good. I'm not for sure what the problem is?

Chrome:
The white box doesn't align with the bottom of the sidebar background, and I can't figure out why.

Any thoughts on either one of these? I thought by getting rid of my 3-section template (header, sidebar & main content), we might be able to eliminate the alignment problem in chrome, but then I didn't know if we could place the rest of the content where it is supposed to be without the template sections? My other concern was whether or not I would be able to place all of the content over an image if set up using a single .jpg? I have no thoughts on the left alignment in Firefox.

Thanks for any suggestions, Joe

edbr
11-11-2008, 04:09 AM
try adding padding to the main content class as you have in sidebar
.twoColFixLtHdr #sidebar1 {
PADDING-RIGHT: 20px;
BACKGROUND-POSITION: center bottom;
PADDING-LEFT: 20px;
FLOAT: left;
BACKGROUND-IMAGE: url(Silversalt%20Images/ssm_cardboard.jpg);
PADDING-BOTTOM: 20px;
WIDTH: 240px;
PADDING-TOP: 20px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 382px;
BACKGROUND-COLOR: #ebebeb;
}
.twoColFixLtHdr #mainContent {
WIDTH: auto;
HEIGHT: 382px;
}
not using chrome so no idea,

re image not sure what you are asking but you can use a small image repeated ans a background then add text in front of it. If that is your question of course

coloeagle
11-11-2008, 04:27 AM
You have other issues that need to be taken care of as well.
You have embedded css and an external css style sheet. The embedded styles will override the external sheet. Since this is duplicated I suggest you remove the embedded style and work strictly with the external sheet.

You may need to give your #mainContent a left margin of 260 plus pixels, this may change the display in ie so you will have to remove the ie conditional statement.

joesp
11-11-2008, 06:09 AM
Both of these helped. I have modified the external css and removed the embedded css. The left margin needed to go to about 280, plus the padding.

http://www.silversaltmarketing.com/ssm_master_template03.html

I adjusted the height of the main content to inherit, from auto, and it seems to fix the bottom alignment in Chrome.? I don't understand the unexactness of this stuff, but am finding out it's alot of trial and error at this point. Thank you!

coloeagle
11-11-2008, 11:46 AM
Glad your getting closer.

Remember that setting a height for a div is not always required. A div will automatically expand depending on the amount of content placed inside of it. By setting a height if the content should require more space it will overflow the div, creating more unwanted display issues.

Just for grins try this on.
Replace your existing style rules for the mainContent div with the following and check your page.
.twoColFixLtHdr #mainContent {
margin-left:280px;
padding:20px;
}