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?

Code:

<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

Thread: help with firefox, in IE it works fine.

Thread Tools

Search Thread

help with firefox, in IE it works fine.

Bookmarks

Bookmarks

Posting Permissions