7 replies [Last post]
centered effect
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-12-19
Posts: 8
Points: 0

centered-effect.ce-designs.net

Pretty much I have been toying with ideas for my personal blog site and gallery. I would love opinions on the art work and code as well as help with validating the site properly as I am stumped. The css validates but the html does not.

I have one error that is keeping me from validating the html:
there is no attribute "alt" in the first line of my ul list, but all other lines are fine?!

Any and all help is appreciated and I love the help and knowledge that is here on this site. Keep up the good work!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Please check my site and a question

You've used alt on your list items which is for images. You should be using title instead. Also, have you checked out your site in Firefox?
Graphics look good though.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

centered effect
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-12-19
Posts: 8
Points: 0

Please check my site and a question

Ahh maybe thats why...

Yes that is the other thing I forgot to mention. IE renders the site centered and Firefox displays it correctly. I am puzzled by it but almost contempt with the bug. Any ideas on how to fix it?

It has been tested in Firefox 1.07, IE6, Konqueror and Safari (1.03 I think).

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Please check my site and a question

centered effect wrote:
It has been tested in Firefox 1.07, IE6, Konqueror and Safari (1.03 I think).

So your content is s'posed to bust out below your footer in Firefox?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

centered effect
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-12-19
Posts: 8
Points: 0

Please check my site and a question

Hmm... odd again. It renders well on my screen. I should of tested it on different resolutions.

This is what it is supposed to look like:
http://img34.imageshack.us/img34/640/screenshot3fg.jpg

EDIT - damn, i checked the site on 800x600 and 1024x768, it renders horribly.

How can I make the above screen apply to all resolutions? Currently I have a fixed hieght for the resolution that I am working at. Which is now my mistake for working in that direction

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Please check my site and a question

Ordinarily the screen res shouldn't affect the height of your box the way it is with your design.
I think your problems stem from the way you've put yours together without floating your left column left and using a large negative top margin to bring your right column back into place.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

centered effect
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-12-19
Posts: 8
Points: 0

Please check my site and a question

Ok I think I have the solution but it leads to another problem.

I have changed the code from:

#outer {

width: 773px;

height:100%; 

margin: 0;

text-align: center;

background: url(images/tile-y.gif) repeat-y;
background-color: transparent;

color: inherit;

position:relative;

border-right: 1px solid #fff; 

}

#content {

width: 773px;

height: 625px;

margin:0;

padding:0;

background: transparent;
}



#left {

width: 174px;

margin: -36px 0 0 -1px;

background: url(images/logo-bottom.gif) no-repeat;
background-color: transparent;

color: inherit;

text-align: left;

}



#leftcontent {

width: 174px;

margin-top: 35px;

padding-top: 50px;

background-color: transparent;

color: inherit;

text-align: center;

}


#right {

width: 580px;
height: 625px;

margin: -300px 0 0 185px;

padding: 0;

background-color: transparent;

color: inherit;

text-align: left;

overflow: auto;

}

To:

#outer {

width: 773px;

min-height:100%; 

margin: 0;
padding: 0;

text-align: center;

background: #141414 url(images/tile-y.gif) repeat-y;
color: inherit;

position:relative;

border-right: 1px solid #fff; 

}

#content {

width: 773px;

margin:0;

padding:0;

background: inherit;
}


#left {

float: left;
width: 174px;

margin: 0;
padding:0;

background: url(images/logo-bottom.gif) no-repeat;
background-color: transparent;

color: inherit;

text-align: left;
position:relative;

}



#leftcontent {

width: 174px;

margin-top: 35px;

padding-top: 50px;

background-color: transparent;

color: inherit;

text-align: center;

}

#right {
float: right;

width: 580px;
margin: 0;
padding: 0;

background-color: transparent;

color: inherit;

text-align: left;
position:relative;


}

You can view the outcome here:
http://centered-effect.ce-designs.net/test/

What the new problem is, is that the tiling background and the a portion of the text does not finish shown here:
http://centered-effect.ce-designs.net/test/Screenshot.png

I have spent the last hour or two trying to figure out the solution with no luck.

*This test has not been tested on any other browser other than Firefox 1.07*

centered effect
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-12-19
Posts: 8
Points: 0

Please check my site and a question

I think I have defined almost all the problems in this thread:
http://www.csscreator.com/css-forum/ftopic14992.html

EDIT - two of the main problems have been solved, so I think I can ask for a better site check now. Safari 1.0.3 renders horribly (the nav bar and the contact page are messed). I thought I checked it.