- This topic is empty.
-
AuthorPosts
-
October 6, 2009 at 7:42 pm #26357
voodazz
ParticipantHey, I’m brand new to css-tricks so I’ll hit the ground running with an age old problem:
position issues with IE and ff, just like the title says.Here’s the site: http://www.voodazz.com/front.html
I have a rotating gallery using jquery’s innerfade plug in and it works fine in FF. It’s exactly where it needs to be:
[img]http://i406.photobucket.com/albums/pp145/voodazz/firefox.jpg[/img]
but you guessed it, it’s slammed all the way to the right side in IE as you can see here:
[img]http://i406.photobucket.com/albums/pp145/voodazz/explorer.jpg[/img]
I’m not quite sure what to do and it’s starting to get really annoying.
Here is the html:Code:
Untitled Document
Who the heck am I??
My name is Vincent Radford and I am the sole owner of the Knoxville based Voodazz Studios with almost 10 years experience in interactive and visual design.
I cater to the budgets of most small businesses because not everyone can afford the rates of larger design firmsWhat am I about?
My primary goal is to give the client the best possible product that meets and exceeds their needs whether it’s a custom illustration for a sports team or giving someone a presence in the virtual world, I help them produce the best solution that would create an inexpensive unique and effective product rather than a pricey ineffective headache.
How am I different?
I’m motivated by quality and customer satisfaction rather than money.
Getting paid for my services is a good thing, don’t get me wrong, but it is not and should not the sole motivating factor in doing business.
Establishing trust and presenting a client with something we’re BOTH happy with is much more important to me.
Here’s the CSS:
Code:@charset “UTF-8”;
/* CSS Document */body {
background-image: url(IMAGES/bg.gif);
margin: 0;
font-family: Arial,Helvetica,Verdana, San-serif;
font-size: 12px;
color: #999;
background-color: #333;}
h5{
font-size: 22px;
margin: 0px;
color: #FF6600;font-family: “Akzidenz Grotesk BE MdCn”, “Arial Narrow”, Arial, Helvetica;
text-transform: uppercase;
padding: 0 0 0 10px;
}h3{
font-size: 21px;
background-color: #d66d10;
color: #FFFFFF;
width: 200px;
font-family: “Akzidenz Grotesk BE MdCn”, “Arial Narrow”, Arial, Helvetica;
text-transform: uppercase;
padding: 0 0 0 10px;}
h2{
font-family: “Akzidenz Grotesk BE MdCn”, “Arial Narrow”, Arial, Helvetica;
font-size: 15px;
margin: 5px 0 0 0px;
color: #b83917;}
.headerImage{
background-image: url(IMAGES/design_header.jpg);
width: 1200px;
background-repeat: no-repeat;
height: 90px;
margin: 0;
position: relative;
}.moveLogo{
position: absolute;
top: 12px;
left: 50px;
margin: 0 0 0 40px;
}.frontContainer{
background-image: url(IMAGES/frontpage_bg.jpg);
width: 1200px;
background-repeat: repeat-x;
padding-bottom: 20px;
height: 326px;
position: relative;}
/*ul#frontSlideShow li img{
float: right;
width: 770px;}
*/
.slideShowContainer{
width: 770px;
margin: 0px;
position: relative;
padding: 0;
left: 175px;}
ul#frontSlideShow {
list-style-type: none;
background: transparent none repeat scroll 0 0;
display: block;
height: 326px;}
ul#frontSlideShow img{
position: absolute;
left: 0;
top: 0;}
.moveLogo2{
position: absolute;
top: 40px;
left: 50px;
margin: 0 0 0 45px;}
.textContainer{
}.textBox{
float: left;
width: 300px;
margin: 0 15px 0 50px;
color: #333333;
font-size: 14px;
line-height: 16px;
}.textBox p {
padding-bottom: 10px;}
.shadowWrapper{
background-image: url(IMAGES/shadowbg.gif);
background-position: center top;
background-repeat: repeat-y;
margin: 0 auto;width: 1250px;
}
.pageWrapper {
margin: 0px 0 0 0;
background-color: #eeeeee;
background-image: url(IMAGES/pagewrap_bg.jpg);
background-repeat: repeat-y;width: 1200px;
z-index: 2;
}.contentWrapper{
background: transparent;
z-index: 500;
margin: 50px 0 0 50px;
width: 980px;}
.thumbNails{
width: 215px;
float: left;
margin: 0 30px 0 0;
padding: 0 0 10px 0;
}.thumbNails p{
margin: 5px 0 5px 0px;
font-size: 14px;
color: #333333;}
.clearBoth {
clear: both;}
.cornerLink ul {
background-color: #2e343d;
text-transform: uppercase;
font-size: 16px;
margin: 0 0px 0 0px;
padding: 10px 10px 10px 0px;
text-align: right;}
.cornerLink li {
display: inline;
list-style-type: none;}
.cornerLink a {
padding: 0 20px 0 0;}
.cornerLink a:visited {
color: #FFFFFF;
text-decoration: none;}
.cornerLink p {
margin: 0;
padding: 0;font-size: 14px;
}
.cornerLinka:link, .cornerLink a:visited {
color: #ffffff;
text-decoration: none;}
.cornerLink a:hover {
color: #cc3300;
text-decoration: underline;}
.shadowFooter{
background-image: url(IMAGES/footershadow.gif);
background-repeat: repeat-x;background-position: bottom;
width: 1250px;}
.footer {
clear: both;text-align: center;
background-image: url(IMAGES/newfooter.jpg);
background-repeat: no-repeat;
font-size: 10px;
color: #fff;
padding: 55px 0px 0px 0px;
width: 1200px;
margin: 0px;}
It’s like the ul#frontSlideShow is completely disregarding the containing div (slideShowContainer). :cry:
It’s probably something reeeeally simple I’m missing (hopefully), but I’m not seeing it.
Some help would be GREATLY appreciated! Thanks.October 6, 2009 at 10:36 pm #65126cybershot
Participanttry throwing this into your css. At the very top of your css.
* {margin: 0; padding: 0; }
-
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.