Jump to content

Any idea why my CSS doesn't work properly? Especially in Safari


VinceGledhill

Recommended Posts

Hi People.

 

I have been putting a site together.  Here is my CSS code

@charset "UTF-8";
/* CSS Document */

   <style media="screen" type="text/css">
    /* <!-- */
    /* General styles */
    body {
        margin:0;
        padding:0;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
        background:#000000;
       
						/* The min-width property does not work in old versions of Internet Explorer */
	font-size:90%;
	text-align:center;
    }


a {
    	color:#369;
}
a:hover {
	color:#fff;
	background:#369;
	text-decoration:none;
}
    h1, h2, h3 {
        margin:.8em 0 .2em 0;
        padding:0;
    }
    p {
        margin:.4em 0 .8em 0;
        padding:0;
    }
img {
	/*
	margin:10px 0 5px;
	*/
}
/* Header styles */
    #header {
        clear:both;
        float:center;
        width:100%;
    }
#header {
	border-top:1px #06F;
	border-bottom:5px double #0000FF /*url(img/border_01.png)*/;
	background-color:#158ed8;
	/*test header border-bottom position */
}
#header p,
#header h1,
#header h2 {
    padding:.4em 15px 0 15px;
        margin:0;
	border-bottom:url(img/border_01.png);
}
#header ul {
    clear:left;
    float:left;
    width:100%;
    list-style:none;
    margin:10px 0 5px 0;
    padding:0;
	border-top:5px;
	border-color:FF0000;
}
#header ul li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#header ul li a {
    display:block;
    float:left;
    margin:0 0 0 5px;
    padding:0px 10px;
    text-align:center;
    background:#22a0c4;
    color:#ffffff;
    text-decoration:none;
    position:relative;
    left:15px;
	line-height:1.3em;
}
#header ul li a:hover {
    background:#0000ff; /* bluey green color background of the menu butons */
	color:#ffffff;
}
#header ul li a.active,
#header ul li a.active:hover {
    color:#FFFFFF;
    background:#0000FF;
    font-weight:bold;
}
#header ul li a span {
    display:block;
}
/* 'widths' sub menu */
#layoutdims {
	/*this is the advert section */
	clear:both;
	background:#d5dffb;		/*vince light blue background */
	border-top:1px solid #0000FF;
	margin:0;
	padding:6px 15px !important;
	text-align:center;
}

#fixed {
   margin:0 auto;
     width:1200px;   /* you can use px, em or % */
   text-align:left;
}
/* column container */
.colmask {
	position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
        width:1200px;				/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
    background:#d5dffb;    	/* Right column background colour */
}
    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-12em; 		/* Width of right column */
        position:relative;
        right:100%;
        background:#FFFFFF; /* Centre column background colour */

    }
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:24em;         		/* Left column width + right column width */
        background:#d5dffb; /* Left column background colour */

    }
    .holygrail .col1wrap {
        float:left;
    width:50%;
    position:relative;
    right:175px;        		/* Width of left column */
    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
}
.holygrail .col1 {
        margin:0 208px;     		/* was 208px Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
    left:199%;
    overflow:hidden;
}
    .holygrail .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:150px;        		/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:5px;         		/* Width of the left-had side padding on the left column */
    }
    .holygrail .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:150px;        		/* Width of right column content (right column width minus left and right padding) */
        margin-right:5px;  		/* Width of right column right-hand padding + left column left and right padding */
        position:relative;
	left:48%;
    }
/* Footer styles */
#footer {
        clear:both;
        text-align:center;
	background-color:#36C;
	color:#FFFFFF;
        width:100%;
	border-top:3px solid #0000FF;
	border-bottom:3px solid #0000FF;
    }
    #footer p {
        padding:10px;
        margin:0;

    }
    /* --> */
    </style>
    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    .col1 {
    width:100%;
}
    </style>
    <![endif]-->

 

Here is the site which is overflowing, please can you tell me how to fix it?

http://www.airfieldcards.com/vg_temp/index.php

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.