15 replies [Last post]
thedash
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2009-05-18
Posts: 11
Points: 0

Hey guys! Nice to meet you all!

So I'm trying to make a "tab" based layout. It uses one image for the tab when it's not pressed, and another image for the tab when its pressed.

The code is here:

http://tech-area.com/files/login.php <-- main code

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

......It looks/works exactly how i want it to in IE... but in firefox it looks all weird. The image is like shifted and cut in half ?

Any help would be appreciated.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 14 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

<html> <head> <title>hello</

<html>
<head>
<title>hello</title>
<base href="http://tech-area.com/files/">
 
<style type="text/css">

That's your problem right there. There's a thread in the sticky section of HowTo here at CSS Creator about Doctypes. Your lack of a doctype is making a very very large difference between IE and the rest of the modern world (and you won't like this, but all your CSS was written to a buggy version of IE, so after you add in the proper doctype, your current code won't work in anyone... you'll need to rewrite, to modern browsers and to IE in "Standards" mode (or as far into Standards as Microsoft will ever get)).

I'm no expert, but I fake one on teh Internets

thedash
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2009-05-18
Posts: 11
Points: 0

Thank you so much for your

Thank you so much for your reply.

I tried inserting a doctype and it didn't seem to fix the problem. everything looks the same as it did before.

Eventually the page will have some frames in it, so i went with:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

please try and avoid frames

Shock please try and avoid frames they are outmoded few use them any longer for a variety of reasons chief amongst which search engines don't like them. Nowadays server side includes and the fact that reloading the page isn't an issue tend to suit the same purpose as frames.

Adding a DTD doesn't necessarily fix anything but enables a certain rendering mode. now IE is following a different set of rules most notable it's using the standards box model, now you have to start to fix what you see as wrong working to a modern browsers view initially (Firefox) then correcting where needed for IE

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thedash
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2009-05-18
Posts: 11
Points: 0

thanks for your reply!

thanks for your reply! believe me, i HATE frames but for this particular site, it needs to be done for a variety of reasons i won't get into.

The problem is i dont know how to fix what's wrong-- i think i coded it exactly right to do what it needs to do; and it displays how i want it to on IE. Can you see anything in particular that's wrong with it making it not look correct in firefox?

I have attached an image of the problem...

AttachmentSize
problem.jpg 54 KB
Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 14 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

<ul class="tabs"

<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>

Another benefit of a doctype, even a nasty one like this (btw, if your frames are going to be iFrames, you do not want this Doctype, which is made for pages built entirely out of tags), is that now you have stated the rules by which you and all rendering agents are playing by-- so you can now send your code to the W3C validator and have it tell you what you've done wrong, and is pretty good at catching typos. Your code above isn't valid code, which means the browsers get to do whatever they think is best.
Now browsers aren't the smartest of creatures, and while sometimes one guesses right, another may guess wrong.

You have a ul with divs as direct children. The only direct children ul's can get away with holding are li's. They aren't even allowed to have other ul's in them!

If you change those div's to li's, you're at least sending code that makes more sense to browsers. The spans would also have to be inside the li's too. Also, be aware you are breaking a big rule with the anchors and images-- anyone who can't get your images to appear are getting a Mystery Meat menu-- there's no text to clue us in on what these links do. Since you're using images, the validator would have complained about there being no alt text. This is great, you can put (a height ans a width stated on HTML images is a good idea usually... one place where CSS isn't supposed to take over (the border being 0 though, belongs in the CSS:
img {
border: 0;
}
does the job nicely). With the alt text, there is something to read for anyone who doesn't get the image. It will look like a link too.

The "rel" part of your anchor is likely not to do anything useful in most browsers. It was supposed to do some great things, and there are some parts of rel that work (for instance telling Google not to index where that link goes), but the href is the main working part. Even if Javascript or something is supposed to come along later and bring Facebook or Myspace content to the page, it's considered a Good Idea to have that link do something useful for those who don't have JS (though it's safe enough if clicking the button does something on the server end of things, since then you're not relying on the client to do the work).

I've posted an image showing the buttons actually looking pretty good in my FF3 in Ubuntu Linux:

AttachmentSize
buttons.gif 7.81 KB

I'm no expert, but I fake one on teh Internets

thedash
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2009-05-18
Posts: 11
Points: 0

thank you for the image

thank you for the image suggestions! i changed all my images to have a height/width/alt in them.

I also changed the

's to
  • 's and added in extra code css code so the buttons display in-line.
  • The 'rel's need to be there to work with the 'tabs.js' code which gives the page that "tabbed" feel when you press a button. It links a link to a div to be displayed when the link is pressed.

    Unfortunately, this doesn't seem to have helped. I still have the same problem as before, with firefox displaying oddly as shown in the attachment in my last post.

    --EDIT--
    OH and also my site will use iFrames, not regular frameset frames--what doctype do you recomment?

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 11 years 14 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    HTML4.01 Transitional -- I

    HTML4.01 Transitional -- I would have said Strict but iFrames have been deprecated for giving old people cancer and diabetes. They're a sort of fairly benign evil.

    What version of FF do you have? But I will also take a look in some other browsers-- I'd only looked in FF3 on Ubuntu.

    I'm no expert, but I fake one on teh Internets

    thedash
    Offline
    Regular
    Last seen: 13 years 34 weeks ago
    Joined: 2009-05-18
    Posts: 11
    Points: 0

    the code for HTML 4.01

    the code for HTML 4.01 Transitional is:

    right?

    My firefox is the newest one i think--version 3.0.10. I have had a few friends try the site on firefox, across a bunch of versions, all with the same results. Surprisingly, in most IE versions, your linux browser, and safari, it works fine. If it was any web browser other then firefox id just say "screw it", but firefox is SO commonly used that i can't ignore the problem.

    thedash
    Offline
    Regular
    Last seen: 13 years 34 weeks ago
    Joined: 2009-05-18
    Posts: 11
    Points: 0

    the code for HTML 4.01

    the code for HTML 4.01 Transitional is:

    right?

    My firefox is the newest one i think--version 3.0.10. I have had a few friends try the site on firefox, across a bunch of versions, all with the same results. Surprisingly, in most IE versions, your linux browser, and safari, it works fine. If it was any web browser other then firefox id just say "screw it", but firefox is SO commonly used that i can't ignore the problem.

    thedash
    Offline
    Regular
    Last seen: 13 years 34 weeks ago
    Joined: 2009-05-18
    Posts: 11
    Points: 0

    the code for HTML 4.01

    the code for HTML 4.01 Transitional is:

    right?

    My firefox is the newest one i think--version 3.0.10. I have had a few friends try the site on firefox, across a bunch of versions, all with the same results. Surprisingly, in most IE versions, your linux browser, and safari, it works fine.

    I updated the doctype--It still looks the same as it did before in firefox. Odd.

    If it was any web browser other then firefox id just say "screw it", but firefox is SO commonly used that i can't ignore the problem.

    thedash
    Offline
    Regular
    Last seen: 13 years 34 weeks ago
    Joined: 2009-05-18
    Posts: 11
    Points: 0

    i dont know why that just

    i dont know why that just posted 3 times... sorry.

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 11 years 14 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    Lawlz! Happens to me too

    Lawlz! Happens to me too sometimes.

    Anyway, I took a look finally in IE (only my browsers in the Virtual Box running WinXP have JS turned on) and now I see what you're doing. Hmmm.

    So I thought this one up:

    http://stommepoes.nl/Tests/tabs.html

    Now, here's what I did:

    The spans outside the li's were still illegal, because that basically made them siblings of the li's, which means they were direct children of the ul's-- and li's are the only valid children:

    • stuff stuff
    • ...

    • stuff stuff
    • ...

    see? That's what you had. Now, I took those out, I couldn't see any "..." anywhere so I could be doing this all wrong. You also didn't have the tag either, so I threw that one back in. Most browser will know it should be there, but never count on that.

    I also don't think in terms of JS, you'll need to ask Hugo for that, so my writing might not be optimised for JS.

    What I have is standard image replacement, and with JS you'll add the class of "clicked" to the spans when people click on them.

    Because the spans above the anchor, you might need to add "cursor: pointer" with the other span code, because IE doesn't think spans are clickable so doesn't show the little hand cursor (it'll still click the link underneath though).

      <ul id="tabs">
        <li class="myspace"><a href="#" rel="myspace">Myspace<span class="clicked"></span></a></li>
        <li class="facebook"><a href="#" rel="facebook">Facebook<span></span></a></li>
      </ul>

    * {
    margin:0;
    padding:0;
    }
     
    #tabs {
      list-style: none;
      padding: 5px;
      background: #3f3f3f;
      border-bottom: 1px solid #000;
      overflow: hidden;
    }
    	#tabs li {
    	  display: inline; 
    	}
    	#tabs a {
    	  float: left;
    	  width: 84px;
    	  height: 22px;
    	  margin-right: 1em;
    	  color: #fff;
    	  position: relative;
    	}
     
    #tabs a:focus, #tabs a:hover {
      color: #9ccfef; 
      text-decoration: none;
    }
    		#tabs a span {
    		  position: absolute;
    		  left: 0;
    		  top: 0;
    		  width: 100%; /*of their parent, the anchor*/
    		  height: 100%;
    		  background: url(myspace.gif) 0 0 no-repeat;
    		}
    		#tabs li.facebook a span {
    		  background-image: url(facebook.gif);
    		}
     
    	                #tabs li a span.clicked {
    	                  background-position: 0 -22px;
    	                }

    I'm no expert, but I fake one on teh Internets

    thedash
    Offline
    Regular
    Last seen: 13 years 34 weeks ago
    Joined: 2009-05-18
    Posts: 11
    Points: 0

    oh i had the "..."'s in

    oh i had the "..."'s in there as a "spacer" just to space out the images a little bit so they weren't right next to one another.

    When i check out the site you put up, the tabs look right, but they dont change when you click them...i think said i need to add in some code to make that happen? how do you go about doing that (and also making only the right DIVs show)? The code i've been using to make things work like tabs is at:
    http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

    Haha i don't know much JS either so if i have to majorly modify the tabs.js file i've been using which i just downloaded from the above website, it could be a problem Smile

    Thanks for all your help so far i really do appreciate it!

    thedash
    Offline
    Regular
    Last seen: 13 years 34 weeks ago
    Joined: 2009-05-18
    Posts: 11
    Points: 0

    i got it! haha yessss!!! i

    i got it! haha yessss!!!

    i combined your code and my old code to produce:

     
    
    
    
    hello
    
    
    
    /* ######### CSS for Tabs ######### */
    
    * {
    margin:0;
    padding:0;
    }
    
    .tabs {
      list-style: none;
      padding: 5px;
      background: #3f3f3f;
      border-bottom: 1px solid #000;
      overflow: hidden;
    }
    
    .tabs li {
    display: inline;
    }
    
    #tabs a {
      float: left;
      width: 84px;
      height: 22px;
      margin-right: 1em;
      color: #fff;
      position: relative;
    }
    
    /*----------------Start myspace button----------------*/
    li.myspace a {
    display: inline;
    background-image:url("http://www.tech-area.com/sitetab/tabs/myspace.jpg");
    background-repeat: no-repeat; 
    }
    
    li.myspace a.selected {
    background-image:url("http://www.tech-area.com/sitetab/tabs/myspace_clicked.jpg");
    background-repeat: no-repeat;
    }
    
    /*----------------End myspace button----------------*/
    
    
    /*----------------Start facebook button----------------*/
    li.facebook a {
    display: inline;
    background-image:url("http://www.tech-area.com/sitetab/tabs/facebook.jpg");
    background-repeat: no-repeat; 
    }
    
    li.facebook a.selected {
    background-image:url("http://www.tech-area.com/sitetab/tabs/facebook_clicked.jpg");
    background-repeat: no-repeat;
    }
    /*----------------End facebook button----------------*/
    
    
    
    .tabcontent{
    display:none;
    }
    
    @media print {
    .tabcontent {
    display:block !important;
    }
    }
    .color {
    color:#3F3F3F;
    }
    
    
    
    
    
    
    
    
    
    
    
    <ul class="tabs" id="tabs">
    		<li class="myspace"><a href="#" rel="myspace"></a></li>
    		<li class="facebook"><a href="#" rel="facebook"></a></li>
    </ul>
    
    
    <div id="myspace" class="tabcontent">
    	myspace
    </div>
    
    <div id="facebook" class="tabcontent">
    	facebook
    </div>
    
    
    
    
    var countries=new ddtabcontent("tabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link")
    countries.init()
    
    
    
    
    

    it works! thank you -so- much!

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 11 years 14 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    My page didn't "work" when

    My page didn't "work" when you clicked it because my page is static-- no codes. I didn't put your Javascript in my page.

    And, right now there's no text for those without images. See that .selected class you have in the CSS? You're adding that with JS right? You can do the same for the spans, which are just holding an image right OVER the text in the anchors-- that way, there's text for everyone, and the images just cover it up. Anyway, there's lots of ways to do this.

    I'm no expert, but I fake one on teh Internets