So close, but not quite . . . (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Chimbird -> So close, but not quite . . . (11/27/2006 23:40:33)

Hi. I'm a newbie and attempting to convert my site to FrontPage (currently up and running with Yahoo SiteBuilder). Here is what I have so far that I'm planning to use as my main .dwt page (mostly lifted from a CubeCart layout I worked up before deciding not to use CubeCart):

http://www.chimneybird.com/frontpage/chimtest.html

When I view it in Firefox, the columns and navigation titles look fine, and it is centered in the browser window, but the paragraph after the heading doesn't show. In IE6, everything is messed up - it doesn't center and the columns are apparently too wide as are the navigation titles. In both browsers, it looks like I have padding around the buttons on the right (view cart, etc.). I made the background black so you could see it.

I think this is probably a pretty straightforward fix, but I've been searching and fiddling and can't quite get it. The code for the layout css is below.

Thanks!


body {
margin-top: 5px;
background-color: #744A00;
}
#pageSurround {
width: 756px;
margin-left: auto;
margin-right: auto;
padding: 5px;
border: 1px solid #000000;
background-color: #FFFFFF;
}
#subSurround {
border: 1px solid #000000;
background-repeat: repeat-x;
background-position: bottom;
background-color: #EBF5FC;
}
#topHeader {
text-align: right;
height: 116px;
margin-bottom: 10px;
padding-right: 9px;
padding-top: 0px;
background-image: url('fotohead.jpg');
border-bottom: 1px solid #412700
}
.boxTitleLeft, .boxTitleRight {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #FFFFFF;
background-color: #CF0211;
width: 126px;
height: 15px;
padding-left: 5px;
padding-top: 1px;
}

/*Adding code for boxContentHome*/
.boxContentHome {
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #FFFFFF;
padding-left: 5px;
margin-bottom: 10px;
padding-top: 3px;
padding-bottom: 5px;
}
.boxContentLeft, .boxContentRight {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #FFFFFF;
padding-left: 5px;
margin-bottom: 10px;
padding-top: 3px;
padding-bottom: 5px;
}
.colLeft {
position: relative;
left: 0px;
width: 131px;
padding-left: 7px;
padding-right: 12px;
float: left;
}
.colMid {
position: relative;
width: 501px;
float: left;
}
.colRight {
position: relative;
width: 84px;
padding-left: 12px;
padding-right: 7px;
float: right;
}
.boxContent {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
padding: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #333333;
background-color: #FFFFFF;
/* Figure this out -- margin-bottom: 35px;*/
text-align: justify;
}
/*Adding code for specialtyButton*/
.specialtyButton {
margin-left: 5px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
background-color: #000000;
margin-bottom: 10px;
padding: 0px;
}
/*Adding code for specialtyAd*/
.specialtyAd {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
background-color: #FFFFFF;
margin-bottom: 10px;
padding: 3px;
}
.siteDocs {
text-align:center;
margin-top: 10px;
}
.pagination {
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
}
#subCats {
background-color: #FFFFFF;
text-align: center;
border: 0px solid #C9CEFC;
margin: 0px;
padding: 3px;
float: left;
width: 387px;
}
.subCat {
text-align: center;
padding: 8px;
float: left;
width: 174px;
}
.regSep{
padding: 10px 0px 10px 0px;
margin: 10px 0px 10px 0px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}



Tailslide -> RE: So close, but not quite . . . (11/28/2006 2:52:12)

Hi

I don't have a chance to test this currently as I'm about to take the kids to school!

But things that jumped out at me are:

1. You've got some code before the DOCTYPE (<!-- BEGIN: body -->) you must remove that - it will throw IE into Quirks mode and then anything could happen!
2. IE6 needs a bit of help to get it to centre properly. You need to include: "text-align: center" in the body CSS rule and then add "text-align:left; margin:0 auto; " into your pageSurround div replacing the "left-margin:auto; right-margin:auto". That will centre the main div in IE6 as well as better browsers.

For whatever reason I can't even open the site in IE7 at the moment! (edit: this was my PC not your site)

You've got the following excerpt of code: 

<span class="txtContentTitle">Welcome to Chimneybird Press!</span>
			</p>Looking for some fresh and fun shirts for the whole family?
			 We have what you need


This should be really: 

<h1>Welcome to Chimneybird Press!</h1>
			<p>Looking for some fresh and fun shirts for the whole family?
			 We have what you need


You'll notice that in the first version you're opening the paragraph with a closing tag (</p>) which is probably why the paragraph isn't showing properly.

Also, semantically the heading should actually be a heading tag (I've used h1) - you can style that heading tag to any size you like in the CSS.

If you're getting double spacing between floated divs in IE then it might be the infamous IE float bug at work - add "display:inline" to one of the floating divs and see if that helps.



Chimbird -> RE: So close, but not quite . . . (11/28/2006 15:36:31)

Thank you! You saved me oodles of time. It's now centering in IE and the bottom margins are working between the center content boxes. Still having trouble with the border around the buttons on the right, but for now I'm just using graphics with a black border. (If I use the outline attribute, it looks fine in Firefox, but doesn't show in IE. I can't get it to work at all with borders - there's always extra space or a border missing - probably just a problem with my column measurements.) Thanks again!



Tailslide -> RE: So close, but not quite . . . (11/29/2006 2:43:39)

Hi again

I'm not sure what problem you're getting with the graphics and the border? I notice that you've got a border in the markup on each image plus a border on the div containing them. I'd dump the border in the markup and stick with the CSS one. If that's not the issue then let us know and we'll try to figure it out.



Chimbird -> RE: So close, but not quite . . . (11/29/2006 16:00:17)

Hi. For now I have the border in the html on the page and it looks fine. When I try to put it in my div, it has problems which seem to have to do with the column width. I can get it to look right on the top and both sides, but in IE there's always a space between the graphic and the bottom border. Outline works in FF but not in IE. I changed the middle and right column widths to allow things at the bottom to center, and fiddled with the specialtyButton and specialtyAd divs. Here's what I have now:

body {
margin-top: 5px;
background-color: #744A00;
text-align: center;
}
#pageSurround {
width: 756px;
text-align: left;
margin: 0 auto;
padding: 5px;
border: 1px solid #000000;
background-color: #FFFFFF;
}
#subSurround {
border: 1px solid #000000;
background-repeat: repeat-x;
background-position: bottom;
background-color: #EBF5FC;
}
#topHeader {
text-align: right;
height: 116px;
margin-bottom: 10px;
padding-right: 9px;
padding-top: 0px;
background-image: url('fotohead.jpg');
border-bottom: 1px solid #412700
}
.boxTitleLeft, .boxTitleRight {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #FFFFFF;
background-color: #CF0211;
width: 126px;
height: 15px;
padding-left: 5px;
padding-top: 1px;
}

/*Adding code for boxContentHome*/
.boxContentHome {
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #FFFFFF;
padding-left: 5px;
margin-bottom: 10px;
padding-top: 3px;
padding-bottom: 5px;
}
.boxContentLeft, .boxContentRight {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #FFFFFF;
padding-left: 5px;
margin-bottom: 10px;
padding-top: 3px;
padding-bottom: 5px;
}
.colLeft {
position: relative;
left: 0px;
width: 131px;
padding-left: 7px;
padding-right: 12px;
float: left;
}
.colMid {
position: relative;
width: 454px;
float: left;
}
.colRight {
position: relative;
width: 131px;
padding-left: 12px;
padding-right: 7px;
float: right;
}
.boxContent {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
padding: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #333333;
background-color: #FFFFFF;
margin-bottom: 10px;
text-align: justify;
}
/*Adding code for specialtyButton*/
.specialtyButton {
margin-left: 28px;
margin-bottom: 10px;
}
/*Adding code for specialtyAd*/
#specialtyAd {
margin-left: 2px;
margin-bottom: 10px;
}
/*Adding code for appBox*/
#appBox {
margin-top: 20px;
margin-bottom: -10px;
text-align: center;
}
.siteDocs {
text-align: center;
margin-top: 10px;
}
.pagination {
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
}
#subCats {
background-color: #FFFFFF;
text-align: center;
border: 0px solid #C9CEFC;
margin: 0px;
padding: 3px;
float: left;
width: 387px;
}
.subCat {
text-align: center;
padding: 8px;
float: left;
width: 174px;
}
.regSep{
padding: 10px 0px 10px 0px;
margin: 10px 0px 10px 0px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125