Log in

View Full Version : help with firefox, in IE it works fine.


thedash
05-18-2009, 08:59 PM
hey guys, so i'm making a tab based layout using images, and here is my code:

http://tech-area.com/files/login.php

http://tech-area.com/files/tabs.css


it works perfectly fine in IE-- does exactly what i want. In firefox, though, the background images seem to get chopped off and shifted....??

Any help would be greatly appreciated.
bluewalrus
05-18-2009, 11:14 PM
I don''t know what your trying to do but maybe this?


<html>
<head>
<title>hello</title>
<base href="http://tech-area.com/files/">
<style type="text/css">
/* ######### CSS for Tabs ######### */
* {
margin:0;
padding:0;
}
.tabs {
padding: 0;
margin:0;
background: #3F3F3F;
border-bottom: 1px solid #000000;
list-style-type: none;
text-align: left;
}

/*----------------Start myspace button----------------*/
div.myspace {
display: inline;
border: #CCCC33;
}

div.myspace a, div.myspace a:link, div.myspace a:visited {
}


div.myspace a.selected img {
visibility:hidden;
}

/*----------------End myspace button----------------*/


/*----------------Start facebook button----------------*/
div.facebook {
display: inline;
}

div.facebook a, div.facebook a:link, div.facebook a:visited {
}


div.facebook a.selected img {
visibility:hidden;
}
/*----------------End facebook button----------------*/



.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}
.color {
color:#3F3F3F;
}
</style>
<script type="text/javascript" src="tabs.js">
</script>

</head>

<body>

<ul class="tabs" id="tabs">
<div class="myspace"><a href="#" rel="myspace"><img src="tabs/myspace.jpg" border=0></a></div><span class="color">..</span>
<div class="facebook"><a href="#" rel="facebook"><img src="tabs/facebook.jpg" border=0></a></div><span class="color">..</span>
</ul>


<div id="myspace" class="tabcontent" style="width:100%;">
facebook
</div>

<div id="facebook" class="tabcontent">
myspace
</div>


<script type="text/javascript">

var countries=new ddtabcontent("tabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init()

</script>

</html>
bluewalrus
05-18-2009, 11:18 PM
Is this the same problem you've posted in three different threads?
thedash
05-19-2009, 12:24 AM
They started off as different questions but unforutunately have converged into the same problem as they have all been solved over time...I appologize for that. Thank you for your reply!



in your above post, did you change anything in the code?

It looks like all you added was
* {
margin:0;
padding:0;
}


i just want to make sure im not missing anything before i try it


...What i'm trying to do is make it look the same in firefox as it does in IE (it's supposed to look the way it looks in IE, but in firefox the image seems to move when its clicked on)

... If you dont have firefox, an image of what is happening (the problem) can be found here: http://www.tech-area.com/files/problem.bmp
bluewalrus
05-19-2009, 01:08 AM
no, i took out your font tag thats not valid you width 100% your table. added in a span with the color style. took out the background images since you have the image tags. I didn't see you using css on the ids at all. I think thats all i did..
thedash
05-19-2009, 01:37 AM
oh i think i need the background image. I'm trying to make it change to the blue background image when you press the button. The way i was doing that was by having the blue one in the background, then when a.selected occurs, it makes the foreground img invisible