Hello everyone,
My new layout for Concept Skateboarding is coming together nicely. I have 3 minor issues with my code which I would love some help on.
http://www.conceptskateboarding.com/...rtal/index.php
Here is the template (in progress)
First of all in Internet Explorer there is twice as much margin underneath the left navigation than in Firefox, Opera, Safari and Chrome. I have checked my CSS and can't seem to find whats wrong with it.
My next issue is very minor, im trying to keep my layout warning/error free on HTML Validator (yes im fussy lol) the only warning I have got is
Quote:
|
<img href="http://www.conceptskateboarding.com/" src="http://www.webmaster-talk.com/images/logo.png" style="height: 100px width: 550px" alt="Concept Skateboarding logo" />
|
section
Quote:
Cause:
The tag contains an attribute that is proprietary to Netscape or Internet Explorer.
Example:
Sample: <table> proprietary attribute "height"
Wrong <table height="100%">
Good <table style="height: 100%">
Solution:
Most tags have a equivalents in standard HTML or CSS.
|
Error
Slightly od and i can't seem to find what is wrong with the code.
My next issue is also very minor and i have tried adding the correct margin to my CSS but it doesn't seem to have an effect. The problem is with my right navigation where it says "related pages" the margin above the text is much bigger than under the text and I cannot seem to fix this.
Quote:
body {
text-align: center;
margin-top:10px;
margin-bottom:10px;
color:#666666;
background-color: #E0E0E0;
}
A:link {
COLOR: #0000FF; text-decoration: none;
}
A:visited {
COLOR: #0000FF; text-decoration: none;
}
A:active {
COLOR: #0000FF; text-decoration: none;
}
A:hover {
COLOR: #FF0000; text-decoration: underline;
}
#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 98%;
text-align: left;
background: #FFFFFF;
border: 8px solid #FFFFFF;
}
#header_wrapper {
background: #4E7DD1 url('../images/menu_bg.gif') bottom left repeat-x;
margin:0px; padding:0px;
}
#header {
height: 120px;
padding:15px;
background: url('../images/header_bg.gif') top right no-repeat;
margin:0px;
}
#header h1 {
margin:0px;
font-family: verdana, arial, sans-serif;
font-size: 28px;
color:#FFFFFF;
letter-spacing: -1px;
}
#header h2 {
margin:0px;
font-family: verdana, arial, sans-serif;
font-size: 14px;
color:#B1C6EB;
letter-spacing: 1px;
}
#left_navigation {
margin-top: 10px;
margin-bottom: 10px;
float: left;
width: 200px;
background: #4E7DD1;
}
#right_navigation {
margin-top: 10px;
margin-bottom: 10px;
float: right;
width: 160px;
}
.right_navigation_header {
background-color: #4E7DD1;
text-align: center;
font-weight: 900;
font-size: 15px;
font-family: tahoma;
color: #FFFFFF;
}
.right_navigation_content {
border-bottom: 2px solid #4E7DD1;
border-left: 2px solid #4E7DD1;
border-right: 2px solid #4E7DD1;
padding-left: 3px;
padding-right: 3px;
padding-top: 10px;
margin-bottom: 10px;
}
#content {
margin-top: 20px;
margin-bottom: 0px;
margin-left: 220px;
margin-right: 180px;
padding-left: 0px;
}
#footer {
height: 50px;
background-color: #4E7DD1;
clear: both;
text-align: center;
padding-top:12px;
color: #B6CEF9;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 18px;
}
#footer A:link {
COLOR: #FFFFFF; text-decoration: none;
}
#footer A:visited {
COLOR: #FFFFFF; text-decoration: none;
}
#footer A:active {
COLOR: #FFFFFF; text-decoration: none;
}
#footer A:hover {
COLOR: #FFFFFF; text-decoration: underline;
}
#left_navigation p, #right_navigation p {
margin:10px;margin-top:15px;margin-bottom:15px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 16px;
color: #333333;
}
#left_navigation h3, #right_navigation h3 {
margin-top:5px; margin-bottom:10px; margin-left:5px; margin-right:5px;
padding:4px;
font-family: verdana, arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: #FFFFFF;
border:1px solid #0F3974;
background-color: #2153AA;
}
#left_navigation h4, #right_navigation h4 {
margin-top:0px;margin-bottom:0px;margin-left:10px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 12px;
color: #2153AA;
}
#content p {
margin-top:15px; margin-bottom: 15px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333333;
}
#content h3 {
margin-top:5px; margin-bottom: 10px;
font-family: verdana, arial, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 18px;
color: #2153AA;
}
#content h4 {
margin-top:0px;margin-bottom:0px;
font-family: verdana, arial, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 12px;
color: #2153AA;
}
#navlist
{
margin-top:1px;
margin-bottom:0px;
text-align:center;
padding: 5px 0;
margin-left: 0;
border-bottom: 1px solid #0F3974;
font: bold 14px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
color: #F1F6FE;
padding: 5px 15px;
margin-left: 3px;
border: 1px solid #0F3974;
border-bottom: none;
background: #2153AA url('../images/tab_bg.gif') bottom left repeat-x;
text-decoration: none;
}
#navlist li a:link { color: #F1F6FE; }
#navlist li a:visited { color: #F1F6FE; }
#navlist li a:hover
{
color: #FFFFFF;
background: #3364BB;
border-color: #0F3974;
}
#navlist li a#current
{
color: #000;
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.float_left {
float: left;
margin-right: 10px;
}
.float_right {
float: right;
margin-left: 10px;
}
.featurebox_center {
background-color: #fffff6;
margin:0px;
padding:10px;
border: 1px solid #DFE8F7;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 18px;
color: #333333;
}
.featurebox_side {
background-color: #fffff6;
margin:0px;margin-left:10px;margin-right:10px;margin-bottom:15px;
padding:10px;
border: 1px solid #DFE8F7;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 18px;
color: #333333;
}
|
There is my CSS
Thanks alot everyone
Jack
Last edited by zomex; 06-12-2009 at 02:27 PM..
|
