Solved

please help see what is wrong with my CSS

Posted on 2012-04-10
12
147 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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
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

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

810 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