4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Template problems in Safari, Firefox and Internet Explorer

by Daniel Soulsby
3 replies
  • WEB DESIGN
    • |
Hi Warriors

I'm seeing a slight glitch in the template when I look at my site in Safari, Firefox and Internet Explorer, so a high % of traffic will see it.

Here's the problem I'm having:

http://www.theracinginsider.com/imag...te_problem.png

You can see the template here:

Free Racing Tips!

I don't know much about css, but here's the styles.css code if that helps?

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

@font-face {
font-family: 'Conv_LucidaGrande';
src: url('../fonts/LucidaGrande.eot');
src: local('☺'), url('../fonts/LucidaGrande.woff') format('woff'), url('../fonts/LucidaGrande.ttf') format('truetype'), url('../fonts/LucidaGrande.svg') format('svg');
font-weight:normal;
font-style:normal;
}

body {
margin: 0px;
padding: 0px;
background: url(../images/bg.png) repeat;
font-family: Arial, Helvetica, sans-serif;
}

#wrapper {
width: 100%;
height: auto;
/*background: url(../images/footer_bg.png) bottom repeat-x;*/
}

#top_header {
width: 100%;
height: 32px;
background: url(../images/header_bg.png) repeat-x;
}

#header_main {
width: 100%;
height:191px;
background: url(../images/members_header.png) top center no-repeat;
}

#header-r {
position: relative;
margin: auto;
width: 1003px;
height: 20px;
}

#header-b {
position: absolute;
top: 264px;
left: 4px;
width: 997px;
height: 420px;
}

#header_sub {
width: 100%;
height: 195px;
background: url(../images/sub_header.png) top center no-repeat;
}

/*
#header {
width: 100%;
height: 190px;
background: url(../images/header.png) top center no-repeat;
margin-top: 10px;
}

#videos-box-header {
margin: auto;
padding: 0px;
height: 500px;
background: url(../images/video_bg.png) no-repeat top center;
position: relative;
overflow: hidden;
width: 100%;
}

#videos-box-relative {
width: 1127px;
margin: auto;
padding: 0px;
position: relative;
}

#videos-box-screen {
width: 740px;
margin: 0px;
padding: 0px;
position: absolute;
top: 45px;
left: 160px;
}
*/

#whit-container-area {
width: 1003px;
margin: auto;
background: url(../images/white_bg.png) top center repeat-y;
position: relative;
}

#whit-container-area b {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: #252525;
}

#whit-container-area p {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
margin: 5px 10px;
color: #252525;
}

#whit-container-area ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: #252525;
}

#whit-container-area ul li {
list-style: url(../images/list_icon.png);
color: #252525;
}

#whit-box-banner {
width: 290px;
height: 286px;
margin: 0px;
padding :0px;
position: absolute;
top: auto;
right:-75px;
}

/*
#content-top {
margin: auto;
width: 1121px;
height: 39px;
background: url(../images/content_top.png) top center;
margin-bottom: -20px;
}

#content-bg {
margin: auto;
width: 1121px;
background: url(../images/content_bg.png) repeat-y center;
}

#content-bottom {
margin: auto;
width: 1121px;
height: 49px;
background: url(../images/content_bottom.png) bottom center;
}

#container-area {
width: 945px;
padding-bottom: 30px;
margin: auto;
}
*/

.clear {
clear: both;
}

.clear20 {
clear: both;
padding-top: 20px;
}

#footer {
width: 100%;
height: 48px;
background: url(../images/footer_bg.png) repeat-x;
}

#footer-copyright {
width: 1003px;
height: 48px;
margin: auto;
background: url(../images/copyright.png) center no-repeat;
}
If any tech warriors can help, I would really appreciate it!

Daniel
#explorer #firefox #internet #problems #safari #template
  • Profile picture of the author Daniel Soulsby
    Hi, thanks for the link to buy an email template for $5, I don't want a new email template, I just need this (website) template fixing.
    {{ DiscussionBoard.errors[10339421].message }}
  • Profile picture of the author yestyle
    Banned
    @The OP, it was error because you made your banner jump to left 1px

    so find and replace this CSS code, it will solve your problem or you can correct your image on photoshop so that you don't need to use CSS

    Code:
    #header_main {
    width: 100%;
    margin-left:1px;
    height:174px;
    background: url(http://www.theracinginsider.com/images/main_header.png) no-repeat top center;
}
    Regards,
    {{ DiscussionBoard.errors[10339491].message }}
  • Profile picture of the author Daniel Soulsby
    Thanks, I couldn't find any instances of that code in your post yestyle, but I didn't think of changing the header doah! I've done that and it seems to have fixed the issue on all browsers apart from Internet explorer, but that's only about 15% of the traffic to the site, not 45% like before. So nice one, thanks very much!

    If anyone can see the bit in the code that's still causing the glitch in internet explorer, please let me know. Thanks!
    {{ DiscussionBoard.errors[10339645].message }}

Trending Topics