I have used the SPRY tabbed panel within my site see http://www.clickitsystems.
i) The page body is within a template editable region and is enclosed with a div called content (this is effectively the RHS of the screen - the LHS is a non-editable column containing navigation buttons). #content has a LHS border defined to act as a visual page divider. Inside this content div is an h1 statement followed by the tabbed panel group thats it. The problem is the LH border only extends the length (height) of the h1 tag the tabbed panel does not seem to extend the content div? As an aside the TabbedPanelsContentGroup rule also defines borders but none appear in the section?
ii) On the Programming tab I have an image floated right and some text wrapping around it from the left in Firefox it looks fine but in IE 8 there is a lot of white space between the text and the image as if there is padding or a margin somewhere but there is not?
Any ideas would be much appreciated.
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Hi me_patrick,
i) Known CSS issue. The fix is to add
height: 1%;
overflow: hidden;
to #content
ii) It looks an awful lot like IE's infamous double float margin bug, but IE 8 shouldn't be affected. In any event, try changing div.figure to :
div.figure {
width: 100px;
float:right;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
display: inline;
}
That's great guys - thank you very much. On point (1) - Jason's solution worked fine which was nice and neat. Strangely the border line now extends right to the top of the container whereas before it stoped at the top of the text (leaving a small gap between the horizontal border of the banner and the verticle border of the page divider as it does at the bottom of the container) but I think it looks ok ... mind you I'd be curious to know why it does that if you know.
On point (ii), Kravimir's suspicion was correct - it was text wrapping ... I tried your solution Jason but it didn't work - for some reason the image went left even though it was floated right and the text was thrown onto the next line. As it happens I have added a new tab and used div.figure again and this time it looks fine in IE8 with different associated text (smaller words).
Thanks again - you've been a great help.
Patrick.
You're welcome.
> Strangely the border line now extends right to the top of the container whereas
> before it stoped at the top of the text (leaving a small gap between the
> horizontal border of the banner and the verticle border of the page divider as
> it does at the bottom of the container) but I think it looks ok ... mind you
> I'd be curious to know why it does that if you know.
It's because overflow:hidden prevents the <h1>'s top margin from collapsing.
More info: http://www.dynamicsitesolu
Perhaps I should mention that using overflow:hidden causes the left margin to be doubled in Firefox 1-2 and Opera. And in Safari and Google Chrome a right margin is effectively added.
@Jason Don't worry about forgetting to refresh. I forget sometimes too.
Business Accounts
Answer for Membership
by: KravimirPosted on 2009-11-04 at 22:38:04ID: 25747197
1) Floated elements don't make their parent elements expand in height by default. In this case, I'd float #content and give it a width. Recommended reading: http://www.dynamicsitesolu
2) That's just because of how the text is wrapping. You could make the font-size for those paragraphs a little smaller to fix that.
Select allOpen in new window