Jump to content

Web Site Problems


Guest A_Sexton

Recommended Posts

Guest A_Sexton

I am having problems with a web site not looking correct on browsers other than my own. I dont know how to fix this as it has happened to me twice now. The Problem always seems to occur when I use css. The trouble that I have is on my computer everything looks fine. Could someone that knows css take a look at my site and tell me where the problem is? I will put the source code for the html and css on this post the pages that the problem is ocurring is the crew page and the gallery page. The web site is http://www.t2gcustoms.com thank you for all comments.

 

 

 

 

<!DOCTYPE html>

<html lang="en">

<head>

<title></title>

<meta charset="utf-8">

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/global.css">

<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>

<script src="js/cufon-yui.js" type="text/javascript"></script>

<script src="js/cufon-replace.js" type="text/javascript"></script>

<script src="js/Impact_400.font.js" type="text/javascript"></script>

<script src="js/slides.jquery.js" type="text/javascript"></script>

<script src="js/flashobject.js" type="text/javascript"></script>

<!--[if lt IE 7]>

<div style=' clear: both; text-align:center; position: relative;'> <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></a></div>

<![endif]-->

<!--[if lt IE 9]>

<script type="text/javascript" src="js/html5.js"></script>

<![endif]-->

</head>

<body id="page5">

<div class="main">

<!--==============================header=================================-->

<header>

<div class="flash-1">

<div id="logo">

<div class="aligncenter"><a href="http://www.adobe.com/go/EN_US-H-GET-FLASH"><img'>http://www.adobe.com/go/EN_US-H-GET-FLASH"><img'>http://www.adobe.com/go/EN_US-H-GET-FLASH"><img src="http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png"'>http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png"'>http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png" alt="" /></a></div>

</div>

<script type="text/javascript">

var fo = new FlashObject("flash/logo_vf8.swf", "logo", "1000", "296", "8", "");

fo.addParam("quality", "high");

fo.addParam("wmode", "transparent");

fo.addParam("scale", "noscale");

fo.write("logo");

</script>

</div>

<div class="flash-2">

<div id="menu">

<div class="aligncenter"><a href="http://www.adobe.com/go/EN_US-H-GET-FLASH"><img src="http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png" alt="" /></a></div>

</div>

<script type="text/javascript">

var fo = new FlashObject("flash/menu_vf8.swf?button=5", "menu", "1000", "100", "8", "");

fo.addParam("quality", "high");

fo.addParam("wmode", "transparent");

fo.addParam("scale", "noscale");

fo.write("menu");

</script>

</div>

<div class="flash-3">

<div id="head">

<div class="aligncenter"><a href="http://www.adobe.com/go/EN_US-H-GET-FLASH"><img src="http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png" alt="" /></a></div>

</div>

<script type="text/javascript">

var fo = new FlashObject("flash/slideshow_vf8.swf", "head", "915", "406", "8", "");

fo.addParam("quality", "high");

fo.addParam("wmode", "transparent");

fo.addParam("scale", "noscale");

fo.write("head");

</script>

</div>

</header>

<!--==============================content================================-->

<section id="content">

<div class="box">

<div class="padding">

<h3 class="p3"><strong></strong><img src="images/page5-title1.png" alt="" /></h3></div>

<div id="iframe"><IFRAME src="http://www.t2gcustoms.com/t2gcrew/index.html" class="iframe">

</IFRAME></div>

 

</div>

</section>

<!--==============================footer=================================-->

<footer>

T2G Customs  © 2011 <a href="privacy.html">Privacy Policy</a></footer>

</div>

<script type="text/javascript">

Cufon.now();

$(window).load(function() {

$('#products').slides({

effect: 'slide, fade',

crossfade: true,

slideSpeed: 350,

fadeSpeed: 500,

generatePagination: false

});

Cufon.refresh();

});

</script>

</body>

</html>

 

 

 

Here is the css info.

 

 

 

 

reset file =

 

 

, abbr, acronym, address, applet, article, aside, audio,

b, blockquote, big, body,

center, canvas, caption, cite, code, command,

datalist, dd, del, details, dfn, dl, div, dt,

em, embed,

fieldset, figcaption, figure, font, footer, form,

h1, h2, h3, h4, h5, h6, header, hgroup, html,

i, iframe, img, ins,

kbd,

keygen,

label, legend, li,

meter,

nav,

object, ol, output,

p, pre, progress,

q,

s, samp, section, small, span, source, strike, strong, sub, sup,

table, tbody, tfoot, thead, th, tr, tdvideo, tt,

u, ul,

var{

background: transparent;

border: 0 none;

font-size: 100%;

margin: 0;

padding: 0;

border: 0;

outline: 0;

vertical-align: top; }

 

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

table, table td {

padding:0;

border:none;

border-collapse:collapse;

}

img {

vertical-align:top;

}

embed {

vertical-align:top;

}.iframe {

height: 600px;

width: 800px;

padding-bottom: 25px;

padding-left: 57px;

}

 

 

 

 

style file =

 

 

/* Getting the new tags to behave */

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}

mark, rp, rt, ruby, summary, time {display:inline;}

 

/* Global properties ======================================================== */

html {width:100%;}

 

body {

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

font-size:100%;

color:#b47f51;

min-width:1000px;

background:url(../images/body.jpg) 50% 0 no-repeat #000;

}

 

.bg {width:100%; background:url(../images/bg-top.jpg) center 0 no-repeat;}

 

.main {

width:915px;

padding:0;

margin:0 auto;

font-size:0.8125em;

line-height:1.5385em;

position:relative;

}

 

a {color:#b47f51; outline:none;}

a:hover {text-decoration:none; color:#fff;}

 

.clear {clear:both; width:100%; line-height:0; font-size:0;}

 

.col-1, .col-2, .col-3, .col-4 {float:left;}

.column-1, .column-2, .column-3 {float:left;}

 

.wrapper {width:100%; overflow:hidden;}

.extra-wrap {overflow:hidden;}

 

.container {width:100%;}

 

p {margin-bottom:20px;}

.p1 {margin-bottom:8px;}

.p2 {margin-bottom:15px;}

.p3 {margin-bottom:30px;}

.p4 {margin-bottom:40px;}

.p5 {margin-bottom:50px;}

 

.reg {text-transform:uppercase;}

 

.fleft {float:left;}

.fright {float:right;}

 

.alignright {text-align:right;}

.aligncenter {text-align:center;}

 

.it {font-style:italic;}

 

.letter {letter-spacing:-1px;}

 

.color-1 {color:#e2e2e2;}

.color-2 {color:#000;}

.color-3 {color:#666;}

 

/*********************************boxes**********************************/

.margin-bot {margin-bottom:35px;}

 

.spacing {margin-right:35px;}

.spacing2 {margin-right:45px;}

.spacing3 {margin-right:60px;}

 

.indent-bot {margin-bottom:20px;}

.indent-bot2 {margin-bottom:35px;}

.indent-bot3 {margin-bottom:45px;}

 

.img-indent-bot {margin-bottom:25px;}

.img-indent {float:left; margin:0 25px 0px 0;}

.img-indent2 {float:left; margin:0 13px 0px 0;}

.img-indent-r {float:right; margin:0 0px 0px 40px;}

 

.img-box {float:left; margin-bottom:20px;}

 

.prev-indent-bot {margin-bottom:10px;}

.prev-indent {float:left; margin:0 17px 0px 0;}

.prev-box {float:left; margin-bottom:8px;}

 

.border {border:3px solid #000;}

 

.buttons a:hover {cursor:pointer;}

 

.menu li a,

.list-1 li a,

.list-2 li a,

.link,

.logo {text-decoration:none;}

 

/*********************************header*************************************/

header {width:100%;}

.flash-1 { position:relative; left:-45px; width:1000px; height:296px; padding-top:19px; z-index:990;}

.flash-2 { position:absolute; width:1000px; height:100px; left:-46px; top:186px; z-index:999;}

.flash-3 { position:relative; z-index:900; margin-top:-28px;}

 

/*********************************content*************************************/

#content {width:100%; padding:22px 0px 31px 0px;}

 

time { display:block; color:#e2e2e2; text-transform:uppercase; font-weight:bold;}

 

.spacer-1 {width:100%; background:url(../images/pic-1.gif) 217px 0 repeat-y;}

.spacer-2 {width:100%; background:url(../images/pic-1.gif) 460px 0 repeat-y;}

 

h3 {font-size:24px; line-height:1.2em; margin:0px 0 26px; color:#fff; position:relative; height:45px;}

h3 strong { position:absolute; width:100%; bottom:0; height:2px; background:url(../images/title-border.png) 100% 0 no-repeat #fcfdfc;}

 

.border-bot {width:100%; padding-bottom:20px; background:url(../images/pic-1.gif) 0 bottom repeat-x;}

 

.box { border:1px solid #473423; min-height:396px; height:auto !important; height:396px; background:url(../images/box.jpg) 0 0 repeat-y;}

.box .padding {padding:25px 24px 30px 26px;}

 

.button {display:inline-block; color:#000; font-size:18px; background:url(../images/button.png) 0 0 no-repeat; width:101px; line-height:34px; text-align:center;}

.fbuttons {

font-size: 18px;

line-height: 34px;

color: #000;

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

text-align: center;

display: inline-block;

width: 101px;

}

.fbuttonr {

color: #000;

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

display: inline-block;

font-size: 18px;

line-height: 34px;

text-align: center;

width: 101px;

}

 

 

.button:hover {

color:#fff;

}

 

.button1 {display:inline-block; font-size:12px; padding-left:9px; color:#fff; background:url(../images/button-left.png) 0 0 no-repeat;}

.button1 span {display:inline-block; cursor:pointer; padding-right:9px; background:url(../images/button-right.png) right 0 no-repeat;}

.button1 span span {padding:2px 3px 3px; background:url(../images/button-tail.png) 0 0 repeat-x;}

.button1 strong {padding:0 0 0 8px; background:url(../images/marker-1.gif) 0 6px no-repeat;}

.button1:hover {color:#24a3ce;}

 

.list-1 { margin-bottom:20px;}

.list-1 li { line-height:24px; padding:0px 0 0 20px; vertical-align:top; background:url(../images/marker.gif) 0 10px no-repeat;}

.list-1 .last-item {background:none;}

 

.list-2 li {line-height:22px; padding-left:12px; background:url(../images/marker-2.gif) 0 8px no-repeat;}

.list-2 li a {color:#fff;}

.list-2 li a:hover {color:#1799cf;}

 

.list-3 {list-style:decimal-leading-zero;}

.list-3 li {font-size:12px; line-height:16px; color:#fff; padding-bottom:12px; margin-left:25px; list-style-type:decimal-leading-zero;}

.list-3 li a {color:#eda202;}

.list-3 li a:hover {color:#24a3ce;}

 

.link { background:url(../images/link.gif) 0 0 repeat-x; height:5px; width:13px; display:inline-block; margin-top:8px;}

.link:hover {background:url(../images/link-hover.gif) 0 0 repeat-x;}

 

.link-1 {display:inline-block; font-size:14px; padding-right:8px; background:url(../images/marker-3.gif) right 8px no-repeat;}

.link-1:hover {}

 

.text-1 {font-size:14px;}

.text-2 {font-size:14px; line-height:1.285em;}

.text-3 {font-size:11px; line-height:1.272em;}

 

dl span {float:left; width:90px;}

dt { margin-bottom:20px;}

 

#form-main {display:block; width:268px;}

#form-main label {display:block; height:32px;}

#form-main input {width:256px; font-size:1em; color:#b47f51; padding:3px 5px; margin:0; font-family:Arial, Helvetica, sans-serif; border:1px solid #372720; background:url(../images/form.png) 0 0 repeat;}

#page6 .main #content .box .padding .wrapper .col-3 form p label #name {

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

}

#page6 .main #content .box .padding .wrapper .col-3 form p label #email {

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

}

#page6 .main #content .box .padding .wrapper .col-3 form p label #message {

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

}

 

#form-main textarea {height:134px; overflow:auto; width:256px; font-size:1em; color:#b47f51; padding:3px 5px; margin:0; font-family:Arial, Helvetica, sans-serif; border:1px solid #372720; background:url(../images/form.png) 0 0 repeat;}

 

.buttons {padding-top:26px; text-align:right;}

.buttons a {margin-left:14px;}

 

/****************************footer************************/

footer {width:100%; padding:50px 0 60px; background:url(../images/footer.gif) 0 0 repeat-x; color:#eaeaea; font-weight:bold; font-size:12px;}

footer a { color:#b47f51; text-decoration:none; margin-left:9px;}

footer a:hover { color:#eaeaea;}

 

 

 

 

layout file =

 

 

 

/*======= index.html =======*/

#page1 #content .col-1 {width:269px; margin-right:28px;}

#page1 #content .col-2 {width:269px; margin-right:28px;}

#page1 #content .col-3 {width:269px;}

 

/*======= index-1.html =======*/

#page2 #content .col-1 {width:566px; margin-right:28px;}

#page2 #content .col-2 {width:269px;}

 

/*======= index-2.html =======*/

#page3 #content .col-1 {width:269px; margin-right:28px;}

#page3 #content .col-2 {width:269px; margin-right:28px;}

#page3 #content .col-3 {width:269px;}

 

/*======= index-3.html =======*/

#page4 #content .col-1 {width:269px; margin-right:28px;}

#page4 #content .col-2 {width:566px;}

 

/*======= index-5.html =======*/

#page6 #content .col-1 {width:269px; margin-right:28px;}

#page6 #content .col-2 {width:269px; margin-right:28px;}

#page6 #content .col-3 {width:269px;}

 

/*======= index-6.html =======*/

#page7 #content p { padding-right:15px;}

Link to comment
Share on other sites

What seems to be the problem? And why in God's name are you using iframes? Also, put this at the top of your css file.

 

* { margin: 0 0; padding: 0 0; }

 

I believe this is mainly for IE since IE automatically tries to add margin and padding. * selects all elements. Put it at the top of the code.

Edited by Archadian
Link to comment
Share on other sites

While we wait for simi and htmlighting to solve the problem and find the solution....

 

 

Archadian, there is nothing wrong with using iFrames, and the reset code you recommend is already there.

 

A-Section, I looked at your code, and I'm overwhelmed. Your page isn't that complicated, yet you have an overabundance of stylesheets and divisions and a huge amount of non-descriptive classes and IDs. It would take me more time than I can spare to figure out what's what here.

 

Also, you don't say what browser you are using and where you find issues, but you are using HTML5, and not all its features are supported by all browsers, that may be part your problem.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...
×
×
  • Create New...