...

View Full Version : Text break bottom of image in Firefox but not IE



ikabod00
01-09-2008, 11:26 PM
So I am having an issue. Oddly enough with something working in IE but not Firefox. My text bypasses the bottom of a repeated image.

Here's my css.


/* CSS Document */
a
{
font-size:10pt;
text-decoration:none;
color:black
}

a:hover
{
font-size:10pt;
text-decoration:none;
color:maroon
}

body
{
margin: 0 0 0 0;
background:#424239;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}


#main
{
width:780px;
height:100%;
text-align: left;
background:url(images/contentbg.jpg) repeat-y;
}

#top
{
background:url(images/mainbg.jpg) repeat-y;
height:245px;
}

.left
{
float:left;
height:100%;
width:512px;
}

.right
{
float:left;
height:100%;
width:268px;
}
#logo
{
background:url(images/logo.jpg) no-repeat;
height:34px;
width:209px;
}

#tagline
{
background:url(images/tagline.jpg) no-repeat;
height:18px;
width:512px;
text-align:right;
font-weight:bold;
font-size:11pt;
font-family:Arial, Helvetica, sans-serif
}

#head
{
background:url(images/header.jpg) no-repeat;
height:193px;
width:512px;
}


.right a
{
font-size:10pt;
text-decoration:none;
padding-left:19px;
color:black
}

.right a:hover
{
font-size:10pt;
text-decoration:none;
padding-left:19px;
color:maroon
}

.home
{
background:url(images/home.jpg) no-repeat;
height:16px;
width:56px;
margin-left:3px;
}

.sitemap
{
background:url(images/sitemap.jpg) no-repeat;
height:16px;
width:67px;
}

.contact
{
background:url(images/contact.jpg) no-repeat;
height:16px;
width:66px;
}


#menu
{
margin-top:32px;
background:#FFA40F url(images/menubg.jpg) no-repeat;
height:193px;
width:268px;

}

.menu_l
{
padding-top:4px;
height:22.5px;
}

.menu_l a
{
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;

}

.menu_l a:hover
{
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color:red;
}

#content
{
height:100%;
width:760px;
}

.left_c
{
float:left;
height:100%;
width:500px;
padding-left:12px;
}

h1
{
color:#CE0101;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
}
.right_c
{
float:left;
height:100%;
width:190px;
padding-left:10px;
}
.rhead
{
background:url(images/r_header.jpg) no-repeat;
height:31px;
width:190px;
padding-top:5px;
padding-LEFT:10px;
margin-left:-10px;
font-weight:bold;
}
.btn
{
background-color:#FF0000;
color:white;
border:solid 1px black;
font-weight:bold
}
.rightm_c
{
float:right;
background:url(images/gridalogy.jpg) no-repeat;
width:46px;
height:264px;
}
#footer
{
padding-left:120px;
color:#000066
}

The page can be found at

http://www.gridalogy.com/new/

jcdevelopment
01-09-2008, 11:39 PM
you may have to set an exact height, i dont like the 100%, it really never works that well for me




#content
{
height:400px;
width:760px;
}

ikabod00
01-09-2008, 11:44 PM
you may have to set an exact height, i dont like the 100%, it really never works that well for me




#content
{
height:400px;
width:760px;
}



That works beautifully, thank you so much :)

jcdevelopment
01-09-2008, 11:44 PM
no problem

ikabod00
01-09-2008, 11:57 PM
no problem


Oh, but the other issue is this page is going to be a template for all the other pages in the site. So I can't really set a size, i need it to be able to span for different amounts of text.

jcdevelopment
01-10-2008, 12:11 AM
ok im stumped about this, i know its probably an easy answer but i cant think of it. If anyone can answer this i am interested in knowing how to do this. i thought not putting a height on the div would let it expand or atleast an inherit property. None of those seem to work though!!

Excavator
01-10-2008, 01:19 AM
ok im stumped about this, i know its probably an easy answer but i cant think of it. If anyone can answer this i am interested in knowing how to do this. i thought not putting a height on the div would let it expand or atleast an inherit property. None of those seem to work though!!

Try making these changes:
#main
{
width:780px;
text-align: left;
background:url(images/contentbg.jpg) repeat-y;
}

#top
{
background:url(images/mainbg.jpg) repeat-y;
height:245px;
}
#content
{
width:760px;
overflow: auto;
}

ikabod00
01-10-2008, 03:43 AM
Try making these changes:
#main
{
width:780px;
text-align: left;
background:url(images/contentbg.jpg) repeat-y;
}

#top
{
background:url(images/mainbg.jpg) repeat-y;
height:245px;
}
#content
{
width:760px;
overflow: auto;
}


Very awesome, works exactly how i need it too. Thanks. The only thing is when the page is empty the stuff from the right side comes over to the left and again, it only does this on Firefox and not IE. But as long as I have text on the page, it works fine. If there is a way around this, that would be great. If not, this works awesome, thank you very much.

Excavator
01-10-2008, 06:21 AM
Very awesome, works exactly how i need it too. Thanks. The only thing is when the page is empty the stuff from the right side comes over to the left and again, it only does this on Firefox and not IE. But as long as I have text on the page, it works fine. If there is a way around this, that would be great. If not, this works awesome, thank you very much.

Try this:
.right
{
float:right;
height:100%;
width:268px;
}


You may need to re-arrange your markup for that to work, I didn't check.

ikabod00
01-10-2008, 11:07 PM
Try this:
.right
{
float:right;
height:100%;
width:268px;
}


You may need to re-arrange your markup for that to work, I didn't check.


That didn't work right away. It may require some rearranging. For now, I need to work on just getting the site up and running. And as long as there is anything in the left column everything looks good. So I think for now I am going to leave it, as I will not have any pages that are complete void of anything in the left column. Thanks for all the help :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum