Website trouble with CSS

[Trigger_tre 1]

Hello all,

Its been awhile since I have posted but I have been hard at work on my website.

After several weeks inserting code based on basic html and "table layouts" (this is what I had used years ago and didnt realize that standards had changed HAHA), I stumbled across the use of CSS and the updated XHTML.

So at this point I am undergoing the daunting task of restructuring with the div tag layouts and stylesheets and such.

I do have a question though....

Currently most of the pages have the same setup seen here.

Please not that I left the spacing of the table at 1px so you could see the basic layout. Also the current header image is just a placeholder for a flash video I am working on. None of the links on this page will work, nor the search tool, and the side bar images are just place holders for the moment.

So far I recreated a stylesheet with an id tag

• "#frame" (which will include the left and right white edges along the sides) 

and two class tags named

• ".contentmain" (which is where the main text will go)

• ".contentside" (which is where the search tool, mini-calendar, and worship times will go).

The problem is that I first tried to float the two div tags with each class to the left and right of the main "frame" but the image background of the "frame" would get blocked out by the new "content" divs. I was wanting to make the "contentmain" transparent so the background image in the "frame" would show through"

I was able to make it transparent by removing my float property but then I wasnt able to align the "contentmain" and "contentside" div correctly.

Hopefully this makes some sense, and hopefully someone can shed some light my way.

-trigger

[Edman_123 11]

Are you using Internet Explorer or a more standards-compliant browser? Also, they should be completely clear by default. Are you setting the color?

[RiverCocytus 0]

try:

background: none;

for the class assigned elements that are on top of #frame.

strangely, unless you are assigning a background color, this should not be happening. However, browser defaults may be causing some headaches.

[Trigger_tre 1]

Ok so far I have been able to learn a little more with the CCS & stylesheets. Man I wish I had learned this stuff earlier. Making changes to the website is alot easier when I have to manipulate only the stylesheet and not each page.

So far I have corrected the layout using only the div tags. You can view it here.

The only problem that I have noticed was that when I put some random text in the main content area I get differrent results in IE and Firefox. Firefox renders it correctly starting at the top but IE puts the text at the bottom below the worship service times.

This is the stylesheet codes I came up with:

body {

background-color: #0000cc;

font-family: Arial, Verdana, sans-serif;

font-size: 16px;

color: #000000; }

#frame {

background-image: url(images/bg.gif);

background-repeat: repeat-y;

width: 800px;

height: 875px;

margin-right: auto;

margin-left: auto;

margin-top: 0px; }

.contentmain {

width: 520px;

padding: 0px;

padding-left: 10px;

padding-right: 10px; }

.sidesearch {

background-image: url(images/sidebar_search1.gif);

float: right;

width: 200px;

height: 75px;

clear: right;

padding-left: 50px;

padding-top: 75px;

margin-right: 10px; }

.sidecalendar {

background-image: url(images/sidebar_calendar.gif);

float: right;

width: 250px;

height: 275px;

clear: right;

margin-right: 10px; }

.sideservices {

background-image: url(images/sidebar_services.gif);

float: right;

width: 250px;

height: 450px;

clear: right;

margin-right: 10px;}

#footer {

background-image: url(images/bg_foot.gif);

background-repeat: no-repeat;

width: 800px;

height: 125px;

margin-right: auto;

margin-left: auto;

margin-top: 0px; }

.containfoot {

width: 715px;

height: 100px;

padding-top: 25px;

padding-right: 75px;

padding-left: 10px; }

.foot1 {

float: left;

clear: left;

width: 530px;

height: 48px;

color: #ffffff;

font-size: 14px;

font-style: italic;

font-weight: bold;

text-align: center;

padding-top: 2px; }

.foot2 {

float: left;

width: 480px;

height: 35px;

color: #0000cc;

font-weight: bold;

word-spacing: 5px;

text-align: center;

padding-top: 15px;

padding-right: 10px; }

.foot3 {

float: right;

width: 225px;

height: 23px;

color: #0000cc;

font-size: 12px;

font-weight: bold;

text-align: center;

padding-top: 27px; }

a.footnavlink:link {

text-decoration: none; }

a.footnavlink:visited {

text-decoration: none; }

a.footnavlink:hover {

color: #ffffff;

background-color: #0000cc;

text-decoration: none; }

a.footlink:link {

text-decoration: none; }

a.footlink:visited {

text-decoration: none; }

a.footlink:hover {

color: #ffffff;

text-decoration: none; }

If anyone wants to look at my page source code at the site link provided and knows why I am getting the text error for IE and Firefox I would appreciate it.

-trigger

[Trigger_tre 1]

Ok I corrected the text layout problem.

Here is the new stylesheet code I came up with...

body {

     background-color: #0000cc;

     font-family: Arial, Verdana, sans-serif;

     font-size: 16px;

     color: #000000; }

#frame {

     background-image: url(images/bg.jpg);

     background-repeat: repeat-y;

     width: 780px;

     height: 875px;

     margin-right: auto;

     margin-left: auto;

     padding-right: 10px;

     padding-left: 10px; }

#header {

     background-image: url(images/testpic1.png);

     background-repeat: no-repeat;

     width: 800px;

     height: 200px;

     margin-right: auto;

     margin-left: auto; }

#frame #sidebar {

     float: right;

     width: 250px;

     height: 875px; }

.sidesearch {

     background-image: url(images/sidebar_search1.gif);

     width: 200px;

     height: 75px;

     padding-left: 50px;

     padding-top: 75px; }

.sidecalendar {

     background-image: url(images/sidebar_calendar.gif);

     width: 250px;

     height: 275px; }

.sideservices {

     background-image: url(images/sidebar_services.gif);

     width: 250px;

     height: 450px; }

#footer {

     background-image: url(images/bg_foot.gif);

     background-repeat: no-repeat;

     width: 800px;

     height: 125px;

     margin-right: auto;

     margin-left: auto; }

.containfoot {

     width: 715px;

     height: 100px;

     padding-top: 25px;

     padding-right: 75px;

     padding-left: 10px; }

.foot1 {

     float: left;

     clear: left;

     width: 530px;

     height: 48px;

     color: #ffffff;

     font-size: 14px;

     font-style: italic;

     font-weight: bold;

     text-align: center;

     padding-top: 2px; }

.foot2 {

     float: left;

     width: 480px;

     height: 35px;

     color: #0000cc;

     font-weight: bold;

     word-spacing: 5px;

     text-align: center;

     padding-top: 15px;

     padding-right: 10px; }

.foot3 {

     float: right;

     width: 225px;

     height: 23px;

     color: #0000cc;

     font-size: 12px;

     font-weight: bold;

     text-align: center;

     padding-top: 27px; }

p.main {

     width: 540px;

     padding-left: 10px; }

a.footnavlink:link {

     text-decoration: none; }

a.footnavlink:visited {

     text-decoration: none; }

a.footnavlink:hover {

     color: #ffffff;

     background-color: #0000cc;

     text-decoration: none; }

a.footlink:link {

     text-decoration: none; }

a.footlink:visited {

     text-decoration: none; }

a.footlink:hover {

     color: #ffffff;

     text-decoration: none; }

This seems to work for both IE and Firefox. However, I now have a new problem. I wanted the main content frame to repeat vertically a minimum of 875 pixels (its highlighted above in blue). But I also need it to expand further if I have more info then that on the page.

If I dont set a height of 875 pixels then the entire body collapses and only the sidebar menus stay normal. Does anyone know how to fix this.

-trigger

[RiverCocytus 0]

do this to make IE and firefox look the same

height: n px !important;

height: m px;

where n is the value that you want firefox to use, and m is the value you want IE to use. Its a great trick that it took me a long time to learn. And believe me, just setting the same value will not cause IE and Firefox to display the same thing.

(note; works for any property.)

[Trigger_tre 1]

My head is aching,

As soon as I think I fix one problem it just causes another one.

Thus far the layout renders properly in Firefox but when I look at it in IE the "Angel Food Ministry" image gets dropped below the sidebar menus and I dont know what I am doing wrong.

All I did was add the "img" tag after the correct div but FF puts it at the top correctly and IE puts it at the bottom. Not sure what to do.

The stylesheet code in my previous post is the current one.

-trigger

[hym 358]

Not being a website programmer, I'm sorry to say that I can't help you any.

Originally posted by: Trigger_tre

As soon as I think I fix one problem it just causes another one.

quote>

 

Have you heard the old programmer's version of Ninety-Nine Bottles of Beer on the Wall?  Basically, it is quite likely that you will fix one problem and have others appear from fixing it.  That said, it might be better to make the site look best with IE.  I know that FireFox  is very popular, but IE still controls over 80% of the browser world.

[RiverCocytus 0]

again, like I said, trigger; IE and Firefox do not treat things the same way. Use the trick I showed you to force them to place things in the right spot.

[+Guest]

Originally posted by: Trigger_tre

This seems to work for both IE and Firefox. However, I now have a new problem. I wanted the main content frame to repeat vertically a minimum of 875 pixels (its highlighted above in blue). But I also need it to expand further if I have more info then that on the page.

If I dont set a height of 875 pixels then the entire body collapses and only the sidebar menus stay normal. Does anyone know how to fix this.

-triggerquote>

 

to fix this problem use the below code in your main content frame part of your css...

overflow: scroll;