hello together,

 

in Dreamweaver CS4 i assembled a tabbed panel.

you may have a look at it right here:

 

http://www.omniquest.de/en/

 

the problem is that the right tab is horizontally a little bit to short in comparison to the whole content box which seems to be a CSS problem to me.

Further more it seems to depend on the type of browser too, how much to short the right tab is displayed.

i'm not too familiar with css and webdesign and it might have happened that i even destroyed the following css during trying to repair it:

 

probably the problem lies within the .TabbedPanelsTab which you can find a little bit below

 

 

.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/

}


.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;

}



[color=#800080].TabbedPanelsTab {[/color]
position: relative;
float: left;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
color: #fff;
background-color: #006941;
list-style: none;
border-left: solid 1px #fff;
border-bottom: solid 2px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-weight: 400;
white-space: normal;
padding: 7px;
padding-left: 7.6pt;
padding-right: 8.5pt
margin: 0px;
}


.TabbedPanelsTabHover {
background-color: #389b45;
}


.TabbedPanelsTabSelected {
background-color: #61af40;
border-bottom: 1px solid #fff;	
}


.TabbedPanelsTab a {
color: black;
text-decoration: none;
}


.TabbedPanelsContentGroup {
clear: both;
/*border-left: solid 1px #444444;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;*/
background-image: url(../pix/navibox/bg_1_pix_hoch.jpg);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: left bottom;
}


.TabbedPanelsContent {
padding-top: 4px;
padding-right: 14px;
padding-bottom: 4px;
padding-left: 14px;
}



.TabbedPanelsContentVisible {
}



.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #ccc;	
border-bottom: solid 1px #ccc;  
}


.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #ccc;	
border-bottom: solid 1px #ccc;  
}


.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}




.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}


.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}

 

 

 

 

 

if there is anyone of you who has an idea how to solve the display-problem, please let me know.

that would be great;-)

 

thanks a lot and have a nice day

teadrinker

Edited October 25, 201213 yr by Renaissance-Design
Code formatting

It looks like a border issue to me, the tabs look like they have a light 1px border whereas the div or element underneath doesn't, so the overall width of the tabs appears smaller.

 

Edit: I looked in Firefox and not IE. I see the problem now!

Edited October 25, 201213 yr by Lyndsey

do you mean the following part of the script where border is deactivated?

 

.TabbedPanelsContentGroup {
clear: both;
/*border-left: solid 1px #444444;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;*/
background-image: url(../pix/navibox/bg_1_pix_hoch.jpg);
background-repeat: repeat-y;
background-attachment: scroll;
background-position: left bottom;
}

 

or is it the <div id="TabbedPanels1" class="TabbedPanels"> in the .html ?

Edited October 25, 201213 yr by Renaissance-Design
Code formatting

I'm not really sure what the issue is, sorry. The only thing I can think of doing is setting the 4 tabs to a specified pixel width as we already know the right_column container is 319px wide.

ok lyndsey, i'll try this out.

thank you so much.

i did it that way: i put an extra css for the right tab and set a specific pixel width to it. now it nearly works properly in most browsers. thanks again ;-)