Solved

please help see what is wrong with my CSS

Posted on 2012-04-10
12
142 Views
Last Modified: 2012-04-15
Please see the screenshot - I want to make a tabbed display box where you press button 1 you get one display message and the second tab button a different message which will be controlled by jquery later. I am having some problems with the CSS as the elements are not fitting where expected (they seem to be rising up.

Can someone please see what I am doing wrong.

thanks
<style type="text/css">

.tab_buttons li {
display:inline;
list-style:none;
float:left;
      }
#widget_mainbody {
height:10em;
width:22.1em;

}
      
</style>

<div class="contentframe">
<div id="tab_panel">
      <ol class="tab_buttons">
            <li><img src="image1,jpg"></li>
            <li><img src="image2.jpg"></li>
      </ol>
</div>
<div id="widget_mainbody">
      <img src="image3.jpg" />
</div>
<div id="cheque_instructions">
      sdfsdfsdfsdfsfdsdfsfsdfsdfsfdsdfsfdsfsdfsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfdsf</a>
</div>
</div>
</div>
0
Comment
Question by:jecommera
  • 7
  • 4
12 Comments
 

Author Comment

by:jecommera
ID: 37829490
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 37831990
Very difficult to see your problem without the images you are using, but you had several typos in your HTML.  Here is your code without the typos.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TEST</title>
    <style type="text/css">
        .tab_buttons li {
        display:inline;
        list-style:none;
        float:left;
              }
        #widget_mainbody {
        height:10em;
        width:22.1em;

        }

    </style>
</head>
<body>
    <div class="contentframe">
        <div id="tab_panel">
              <ol class="tab_buttons">
                    <li><img src="image1.jpg"></li>
                    <li><img src="image2.jpg"></li>
              </ol>
        </div>
        <div id="widget_mainbody">
              <img src="image3.jpg" />
        </div>
        <div id="cheque_instructions">
              sdfsdfsdfsdfsfdsdfsfsdfsdfsfdsdfsfdsfsdfsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfdsf
        </div>
    </div>
</body>
</html>

Open in new window

0
 

Author Comment

by:jecommera
ID: 37832227
Hi,

Please find file attached.

thanks
0
 
LVL 42

Expert Comment

by:David S.
ID: 37832237
Your screenshot doesn't show very clearly what's wrong. In the future, it would be helpful to also include a picture of how you want it to look.

Perhaps what you're describing is the floated elements overlapping the top edge of "#widget_mainbody". The simplest way to prevent that is to give "clear:both" to "#widget_mainbody".
0
 

Author Comment

by:jecommera
ID: 37832277
very sorry - I meant file with code attached.

(not being cheeky and referring to the screenshot :)

uploading again...
file.zip
0
 

Author Comment

by:jecommera
ID: 37832469
The HTML in the attached file above is wrong so I have updated below.

<html>
      <head>
            <title>test</title>
            <style type="text/css">

#tab_panel {
margin:0; padding:0;
}

.tab_buttons {
      margin:0;padding:0;
}
.tabimages {
display:inline;
list-style:none;
float:left;
margin:0; padding:0;
      }
            
#widget_mainbody {
width:22em;
height:10em;
background:url("image7.jpg") no-repeat;
clear:both;  
}
      
#cheque_instructions {
            
      }
</style>
      </head>
      <body>

      

<div class="contentframe">
<div id="tab_panel">
      <ol class="tab_buttons">
            <li class="tabimages"><img src="image3.jpg" alt="image1"></li>
            <li class="tabimages"><img src="image4.jpg" alt="image2" ></li>
      </ol>
</div>
<div id="widget_mainbody">
      
</div>
<div id="cheque_instructions">
      We also accept cheques. To learn more please read our <a href="">payment instructions.</a>
</div>
</div>


      </body>
</html>
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 42

Expert Comment

by:David S.
ID: 37832610
Does your page really not include a doctype? You should add one.

http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your/
http://www.dynamicsitesolutions.com/html/document-types/

If after adding a doctype, you still have a problem, please try to explain it in more detail.
0
 

Author Comment

by:jecommera
ID: 37832696
Hi,

I included the doctype but it makes no difference.
I have zipped up with the correct file.

regards,
file.zip
0
 

Author Comment

by:jecommera
ID: 37832705
I think the main thing I am trying to do here is improve my CSS.
Can you please review the code and see if this is the best way to do it.
0
 
LVL 42

Expert Comment

by:David S.
ID: 37833057
Giving "display:inline" to a floated element is only necessary to avoid IE6's doubled margin bug.

<div>s don't have margins or padding by default, so you may not need be setting them to 0 for "#tab_panel".

For elements that contain text, it's best to avoid setting fixed heights. I suggest you use a min-height instead.

It's generally best to apply styles as high up the tree as possible. In this case, that means it's better to give the list-style declaration to the list (".tab_buttons") instead of the list-items (".tabimages").

Also, I'd probably use an unordered-list (<ul>) instead of an ordered-list (<ol>).
0
 

Author Comment

by:jecommera
ID: 37833718
Hi

Thanks very much for the helpful feedback this is exactly what I need.
There seems to be some space being applied pushing up the tabs from the main image also the main image seems to be pushing the text box down.

(screenshot attached from firefox) why is this happening?

thanks,
image1.jpg
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 37834076
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now