Solved

please help see what is wrong with my CSS

Posted on 2012-04-10
12
149 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

821 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