CSS issue

dc2447

Joined: 2002-09-22
Posts: 130
Posted: Sun, 2005-10-09 16:53

Hi - I am getting ready to switch to G2 but I am fighting with the CSS. I am using the blue colorpack modified with matrix theme.

Thew issue is my header:

How my g2 looks
http://www.cpfc.org/g2/main.php?g2_view=core.ShowItem&g2_itemId=434

How the header *should* look
http://forums.cpfc.org

Any idea why the table is getting stretched like that?

cheers
 
dc2447

Joined: 2002-09-22
Posts: 130
Posted: Mon, 2005-10-10 07:40

anyone? Maybe I'm not being clear. Somehow one of the style sheets in G2 is causing my header to look like this:

when it should look like this:

This is the only thing stopping me 'living' my g2
 
RwD
RwD's picture

Joined: 2005-01-09
Posts: 383
Posted: Mon, 2005-10-10 08:15

In IE everything looks more or less correct...
Can you check the padding and margins of that image and the table cell around it?

by the way, an easier way to get that look would be without tables. I will show you another way which is not correct either but already is a lot better:

<div style="padding: 0; width: 95%">
    <div style="background-color: #efefef; text-align: center;">
        <a style="font-weight: bold;" href="http://www.cpfc.org">Home</a> |
        <a style="font-weight: bold;" href="http://forums.cpfc.org/chat.php">Chat</a> |
        <a style="font-weight: bold;" href="http://forums.cpfc.org">Forums</a> |
        <a style="font-weight: bold;" href="http://gallery.cpfc.org">Gallery</a> |
        <a style="font-weight: bold;" href="http://links.cpfc.org">Links</a> |
        <a style="font-weight: bold;" href="http://news.cpfc.org">News Feeds</a> |
        <a style="font-weight: bold;" href="http://league.cpfc.org">Predictions</a> |
        <a style="font-weight: bold;" href="http://travel.cpfc.org">Travel</a>
    </div>
    <div style="margin: 0; padding: 0; height: 0; line-height: 0; border-top: 4px solid #f00; border-bottom: 3px solid #00f;">&nbsp;</div>
</div>

If you decide not to use this code, at least look at this part 

<font size="2"><b><font size="2"><b><font size="2"><b>
<font size="2"><b><font size="2"><b><font color="#FF0000"><a href="http://tables.cpfc.org"></a></font></b>
</font></b></font></b></font></b></font></b></font>

In this part of code is no text not even a link, this will display nothing and looks like the result of a wysiwyg editor...

(btw: the font, b and center elements should not be used anymore in any case)
______________________
I made a theme for G2, try it :)
 
dc2447

Joined: 2002-09-22
Posts: 130
Posted: Mon, 2005-10-10 09:35

Thanks - with a bit of tweaking that works great
 
RwD
RwD's picture

Joined: 2005-01-09
Posts: 383
Posted: Mon, 2005-10-10 10:31

Actually, you used the original version of my reply, I edited it because the thing you are using now doesn't work correctly in IE. The thing I put above now works in both browsers. I noticed the changes, and you changed it the wrong way! Below is a version that is more correct:

<div style="text-align: center;">
    <div style="padding: 0; width: 95%">
        <div style="background-color: #efefef; text-align: center;">
            <a style="font-weight: bold; font-size: small;" href="http://www.cpfc.org">Home</a> |
            <a style="font-weight: bold; font-size: small;" href="http://forums.cpfc.org/chat.php">Chat</a> |
            <a style="font-weight: bold; font-size: small;" href="http://forums.cpfc.org">Forums</a> |
            <a style="font-weight: bold; font-size: small;" href="http://gallery.cpfc.org">Gallery</a> |
            <a style="font-weight: bold; font-size: small;" href="http://links.cpfc.org">Links</a> |
            <a style="font-weight: bold; font-size: small;" href="http://news.cpfc.org">News Feeds</a> |
            <a style="font-weight: bold; font-size: small;" href="http://league.cpfc.org">Predictions</a> |
            <a style="font-weight: bold; font-size: small;" href="http://travel.cpfc.org">Travel</a>
        </div>
        <div style="margin: 0; padding: 0; height: 0; line-height: 0; border-top: 4px solid #f00; border-bottom: 3px solid #00f;">&nbsp;</div>
    </div>
</div>

The align attribute is also deprecated, so are most attributes you use inside tables!! You should solve this using css...
______________________
I made a theme for G2, try it :)
 
dc2447

Joined: 2002-09-22
Posts: 130
Posted: Mon, 2005-10-10 11:41

This code aligns left in firefox - no idea about MSIE :(
 
RwD
RwD's picture

Joined: 2005-01-09
Posts: 383
Posted: Mon, 2005-10-10 12:26

Actually, that is a bug in Firefox, I forgot about that, the code below includes the fix for the bug so it works in both browsers!

<div style="text-align: center;">
    <div style="padding: 0; width: 95%; margin: 0 auto;">
        <div style="background-color: #efefef; text-align: center;">
            <a style="font-weight: bold; font-size: small;" href="http://www.cpfc.org">Home</a> |
            <a style="font-weight: bold; font-size: small;" href="http://forums.cpfc.org/chat.php">Chat</a> |
            <a style="font-weight: bold; font-size: small;" href="http://forums.cpfc.org">Forums</a> |
            <a style="font-weight: bold; font-size: small;" href="http://gallery.cpfc.org">Gallery</a> |
            <a style="font-weight: bold; font-size: small;" href="http://links.cpfc.org">Links</a> |
            <a style="font-weight: bold; font-size: small;" href="http://news.cpfc.org">News Feeds</a> |
            <a style="font-weight: bold; font-size: small;" href="http://league.cpfc.org">Predictions</a> |
            <a style="font-weight: bold; font-size: small;" href="http://travel.cpfc.org">Travel</a>
        </div>
        <div style="margin: 0; padding: 0; height: 0; line-height: 0; border-top: 4px solid #f00; border-bottom: 3px solid #00f;">&nbsp;</div>
    </div>
</div>

I actually tested it this time ;)
______________________
I made a theme for G2, try it :)
 
dc2447

Joined: 2002-09-22
Posts: 130
Posted: Mon, 2005-10-10 12:39

wow - very cool - many thanks
 
larryinfl

Joined: 2003-10-03
Posts: 8
Posted: Sat, 2006-04-01 01:37

I'm having the same issue. Check out my home page and then my photos page. You can see the difference in the header and footer.

http://www.larryandlisaward.com
 
larryinfl

Joined: 2003-10-03
Posts: 8
Posted: Sun, 2006-04-02 03:55

It seems that space is being added to the bottom of my images. I removed some 1 x 1 pixel spacer images and those areas corrected.
 
larryinfl

Joined: 2003-10-03
Posts: 8
Posted: Thu, 2006-04-13 13:31

I found the problem that causes this.

Change the line at the top of theme.tpl from:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">