...

View Full Version : minor id tag problem



trigger_tre
10-26-2006, 03:22 PM
Hello and thanks in advance,

I have certain content id tags in my .css file. They go from content1, content2,..., and content5.

Content5 has no set height value because it is supposed to allow any runoff text to expand further down the page. For some reason using the "content5" id tag cause my "titlebar" image to disappear. The "titlebar" image is what seperates the different categories in my main content area.

This is what the page should look like HERE (http://harvestwhitecounty.com/ourpurpose.php) except the content3 should be content5 so that the text can expand as need if text is inlarged.

This is what the page looks like when I try to change from content3 to content5 HERE (http://harvestwhitecounty.com/testcontent5.php)

thanks,

trigger

1212jtraceur
10-26-2006, 04:32 PM
I had to look through your source code to find the css file (http://harvestwhitecounty.com/bodystyle.css) you referred to . I shouldn't have to do that...Next time, could you post a link to everything you think may be causing the problem?

Now for the solution, hopefully: One thing I notice is that, in bodystyle.css, #content3 displays inline, floats left, has width/overflow/margin-left declarations, etc..., whereas #content5 doesn't. Try something more like:



#content5 {
width:480px;
float:left;
overflow:auto;
margin-left:10px;
padding: 0 10px;
display:inline;
}


in bodystyle.css and see if that helps. :thumbsup:

Another thing I noticed is that you have the <h1 class="title">Our Purpose!</h1> outside of <div id="content5">. I don't think that would cause your problem, but you may wish to fix that...

trigger_tre
10-26-2006, 05:29 PM
Oops, Sorry I actually included the .css code first time. But had to retype the message cause it didnt make sense and never re-added .css sorry.

As for your solution:

I cant add those values for my content5 id tag here is why.

width:480px (this restricts the content in "content5" to only 480px wide when I need it to extend the entire width 700+ px when the text reaches the end of the right column)

float:left (this causes the content in "content5" to float below the last div tag in the right column.)

overflow:auto (I already have this added to my "footer" id tag on every page so that the page automatically get extended if needed.)

margin-left:10px (this value has already been added to another id tag, and would offset text within this "content5" from the other content areas.)

I am beginning to think that the values for "content5" are correct and that it is something else. The actual problem is that FF doesnt display the "titlebar" image I use to seperate content areas and IE displays it but slides it to the left a few spaces.

Again this is the problem page HERE (http://harvestwhitecounty.com/testcontent5.php)

And this is how the page should display just that "content3" should be replaced with "content5" HERE (http://harvestwhitecounty.com/ourpurpose.php)

Oh and here is the css page.


html, body {
margin:0;
padding:0;
background:#036;
color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
body {
padding:20px 0;
}
#container {
width:750px;
margin:auto;
background:#00C url(images/bg.jpg) repeat-y;
}
#header {
line-height:0px;
font-size:0;
height:25px;
background:#00C url(images/testpic2.gif) no-repeat;
color:#FFF;
padding-top:175px;
padding-left:35px;
}
#right-col {
width:250px;
float:right;
margin-right:10px;
display:inline; /*fixes IE double margin bug*/
}
#search {
height: 75px;
padding-left: 50px;
padding-top: 75px;
background:#00C url(images/sidebar_search.gif) no-repeat;
color:#000;
}
#search1 {
height: 75px;
padding-left: 50px;
padding-top: 75px;
background:#00C url(images/sidebar_search1.gif) no-repeat;
color:#000;
}
#cal {
height:225px;
padding-left: 50px;
padding-top: 50px;
background:#00C url(images/sidebar_calendar.gif) no-repeat;
color:#000;
}
#cal1 {
height:225px;
padding-left: 50px;
padding-top: 50px;
background:#00C url(images/sidebar_calendar1.gif) no-repeat;
color:#000;
}
#callegend {
height: 25px;
width: 65px;
background:#00C url(images/clipart_callegend.gif) no-repeat;
margin: 0px 0px 0px 55px;
}
#googlead {
padding-left: 50px;
padding-top: 50px;
background:#00C url(images/sidebar_googlead.gif) no-repeat;
height:625px;
overflow:auto;
}
#googlead1 {
padding-left: 50px;
padding-top: 50px;
background:#00C url(images/sidebar_googlead1.gif) no-repeat;
height:625px;
overflow:auto;
}
#services {
padding-left: 50px;
padding-top: 60px;
background:#00C url(images/sidebar_services.gif) no-repeat;
height:390px;
overflow:auto;
}
#services1 {
padding-left: 50px;
padding-top: 60px;
background:#00C url(images/sidebar_services1.gif) no-repeat;
height:390px;
overflow:auto;
}
#memberlog {
height: 75px;
padding-left: 50px;
padding-top: 75px;
background:#00C url(images/sidebar_memberlogin.gif) no-repeat;
color:#000;
}
#memberlog1 {
height: 100px;
padding-left: 50px;
padding-top: 50px;
background:#00C url(images/sidebar_memberlogin1.gif) no-repeat;
color:#000;
}
.servicetitle {
color:#00C;
font-size:13px;
font-weight: bold;
}
.servicesub {
font-size:10px;
font-weight: bold;
}
#content1 {
width:480px;
float:left;
height:150px;
overflow:hidden;
margin-left:10px;
display:inline;
}
#content2 {
width:480px;
float:left;
height:275px;
overflow:auto;
margin-left:10px;
display:inline;
}
#content3 {
width:480px;
float:left;
height:675px;
overflow:auto;
margin-left:10px;
display:inline;
}
#content4 {
width:480px;
float:left;
height:875px;
overflow:auto;
margin-left:10px;
display:inline;
}
#content5 {
padding: 0 10px;
}
#content2_3 {
width:480px;
float:left;
height:950px;
overflow:auto;
margin-left:10px;
display:inline;
}
.contentcolumncontain {
width:150px;
float:left;
display:inline;
}
#contentcolumn1 {
background:#FFF url(images/bg_column.jpg) repeat-y;
width:480px;
float:left;
color:#009;
margin-left:10px;
display:inline;
}
#contentcolumn2 {
background:#FFF url(images/bg_column2.jpg) repeat-y;
width:730px;
float:left;
color:#009;
margin-left:10px;
display:inline;
}
#contentcolumnpic {
background:#FFF url(images/bg_column3.jpg) repeat-y;
width:730px;
float:left;
color:#009;
margin-left:10px;
display:inline;
}
#contentcolumn3 {
background:#FFF url(images/bg_column2.jpg) repeat-y;
width:730px;
float:left;
color:#009;
margin-left:10px;
display:inline;
}
.contentcolumnmaintop {
height:25px;
width:480px;
float:left;
background:#FFF url(images/titlebar_columntop.gif) no-repeat;
margin:0;
font-weight: bold;
text-align: center;
line-height:25px;
font-size:115%;
}
.contentcolumnmaintop2 {
height:50px;
width:730px;
float:left;
background:#FFF url(images/titlebar_columntop2.gif) no-repeat;
margin:0;
font-weight: bold;
text-align: center;
color:#00C;
line-height:50px;
font-size:175%;
}
.contentcolumnmainmid {
height:25px;
width:480px;
float:left;
background:#FFF url(images/titlebar_columnmid.gif) no-repeat;
margin:0;
font-weight: bold;
text-align: center;
line-height:25px;
font-size:115%;
}
.contentcolumnmainmid2 {
height:50px;
width:730px;
float:left;
background:#FFF url(images/titlebar_columnmid2.gif) no-repeat;
margin:0;
font-weight: bold;
text-align: center;
color:#00C;
line-height:50px;
font-size:175%;
}
.contentcolumnmainbottom {
height:25px;
width:480px;
float:left;
background:#FFF url(images/titlebar_columnbottom.gif) no-repeat;
margin:0;
}
.contentcolumnmainbottom2 {
height:25px;
width:730px;
float:left;
background:#FFF url(images/titlebar_columnbottom2.gif) no-repeat;
margin:0;
}
.contentcolumnsub {
height:25px;
width:460px;
float:left;
font-weight: bold;
background:#FFF url(images/titlebar_columnsub.gif) no-repeat;
font-family:Comic Sans MS, Brush Script MT, cursive;
color:#fff;
margin:0;
padding:0 0 0 20px;
line-height:25px;
font-size:100%;
}
.contentcolumnsub2 {
height:25px;
width:730px;
float:left;
font-weight: bold;
background:#FFF url(images/titlebar_columnsub2.gif) no-repeat;
font-family:Comic Sans MS, Brush Script MT, cursive;
color:#fff;
margin:0;
text-align: center;
line-height:25px;
font-size:100%;
}
.contentcolumnr {
width:324px;
float:right;
padding-top: 10px;
padding-right: 6px;
display:inline;
}
.contentcolumnr_2 {
width:250px;
float:right;
padding-top: 10px;
padding-right: 6px;
padding-left: 4px;
display:inline;
}
.contentcolumnl {
width:144px;
height:90px;
float:left;
font-size:75%;
padding-top: 10px;
padding-left: 6px;
display:inline;
}
.contentcolumnl_2 {
width:460px;
float:left;
padding-top: 10px;
padding-right: 4px;
padding-left: 6px;
display:inline;
}
.contentcolumnl2 {
width:144px;
height:25px;
float:left;
padding-left: 6px;
font-size:75%;
display:inline;
}
.contentcolumnl2_2 {
width:718px;
float:left;
padding-top: 10px;
padding-right: 6px;
padding-left: 6px;
padding-bottom: 10px;
text-align: center;
font-size:100%;
display:inline;
}
.contentcolumn3 {
width:718px;
background:#00C url(images/bg_column3.jpg) repeat-y;
float:left;
padding-right: 6px;
padding-left: 6px;
text-align: center;
display:inline;
}
.contentcolumnl1_2 {
width:698px;
float:left;
padding-top: 10px;
padding-right: 6px;
padding-left: 26px;
padding-bottom: 10px;
font-size:100%;
display:inline;
}
#contentcal {
float:left;
margin-top:10px;
margin-left:6px;
margin-right:6px;
display:inline;
}
.title {
height:50px;
background:#FFF url(images/titlebar.gif) no-repeat;
color:#00C;
margin:0;
padding:0 0 0 20px;
line-height:50px;
font-size:175%;
}
.title1 {
height:50px;
background:#FFF url(images/titlebar1.gif) no-repeat;
color:#00C;
margin:0;
padding:0 0 0 20px;
line-height:50px;
font-size:175%;
}
.title2 {
height:50px;
background:#FFF url(images/titlebar2.gif) no-repeat;
color:#00C;
margin:0;
padding:0 0 0 20px;
line-height:50px;
font-size:175%;
}
.sub {
float:left;
width:460px;
margin-left:10px;
display:inline;
}
p {
padding:0 10px 10px 0;
margin:0;
}
p.italic {
padding:0 10px 10px 0;
margin:0;
font-style: italic;
text-indent: 2em;
}
span.ministry {
font-weight: bold;
text-indent: 2em;
font-size: 125%;
}
span.columnpad {
font-weight: bold;
padding-right: 6px;
padding-left: 6px;
font-size: 100%;
}
.indent {
padding:0 10px 10px 0;
margin:0;
text-indent: 2em;
}
img.floatleft {
padding:0px 5px 5px 0;
margin:0;
float: left;
}
.columncenterpad {
text-align: center;
padding-right: 6px;
padding-left: 6px;
margin:0;
}
a img {
border: 0;
}
#footer {
height:125px;
clear:both;
background:#00C url(images/bg_foot.gif) no-repeat;
}
#foot1 {
float: left;
clear: both;
width: 690px;
height: 48px;
color: #ffffff;
font-size: 11px;
font-weight: bold;
text-align: center;
padding-top: 27px;
overflow:auto;
}
#foot2 {
float: left;
width: 450px;
color: #036;
font-weight: bold;
word-spacing: 5px;
text-align: center;
padding-top: 15px;
}

#foot2 a:link, #foot2 a:visited {
text-decoration: none;
color:#036;
background-color:inherit;
}
#foot2 a:hover, #foot2 a:active {
color: #FFF;
background-color: #036
}
#foot3 {
float: right;
width: 250px;
color: #036;
font-size: 12px;
font-weight: bold;
text-align: center;
padding-right: 50px;
padding-top: 30px;
}
#foot3 a:link, #foot3 a:visited {
text-decoration: none;
color:#036;
background-color:inherit;
}
#foot3 a:hover {
color:#FFF;
background-color:inherit;
text-decoration: underline;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum