[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

please help see what is wrong with my CSS

Posted on 2012-04-10
12
Medium Priority
?
153 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 43

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 43

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 43

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 43

Accepted Solution

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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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.…
Suggested Courses

649 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