[css-d] large gap between boxes in IE and FF
Dear All, I am working on the same 3 column liquid layout. The problem now is a large gap between rows of news stories in the center column. I added a negative top margin to the second row to bring it up, but I don't understand what is causing it. Here is the version without the negative margin fix and with, respectively. http://frank.mtsu.edu/~provost/MT_home/mt_bulletproof.shtml http://frank.mtsu.edu/~provost/MT_home/mt_bulletproof2.shtml I also don't understand why there is a space under the thumbnail and title even though I've specified a height and no margin or padding. This is all getting too complicated and I'm thinking about going to a fixed width layout, but I'd love to make this work. Can anyone help? Thanks, Kris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] large gap between boxes in IE and FF
On Nov 29, 2008, at 9:40 AM, A.K. Allen wrote:
Dear All,
I am working on the same 3 column liquid layout. The problem now is
a large gap between rows of news stories in the center column. I
added a negative top margin to the second row to bring it up, but I
don't understand what is causing it. Here is the version without
the negative margin fix and with, respectively.
http://frank.mtsu.edu/~provost/MT_home/mt_bulletproof.shtml
http://frank.mtsu.edu/~provost/MT_home/mt_bulletproof2.shtml
I also don't understand why there is a space under the thumbnail and
title even though I've specified a height and no margin or padding.
This is all getting too complicated and I'm thinking about going to
a fixed width layout, but I'd love to make this work. Can anyone
help?
all those bottom-margins on #content div accumulate, because each div
establishes a new block formatting context (they are floated or have
'display:inline-block'). In that case, margins don't collapse.
All those divs also have a bottom padding, which accumulate as well.
Try:
#content div {
margin-bottom:0;
padding:10px 10px 0;
}
The fine-tune at the level of individual divs. Maybe add back some
padding or margin on div.title or/and div.columnLeft,...
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Large gap
URL: www.objectivedesigns.com If you go to the photography page and scroll about 2/3 of the way down through the photo thumbnails, you'll see that in IE6, there's a big gap of emptiness. Any idea why this is happening? Thanks in advance. Daniel Hammond www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Large gap
5:55 To: CSS Discuss Subject: [css-d] Large gap URL: www.objectivedesigns.com If you go to the photography page and scroll about 2/3 of the way down through the photo thumbnails, you'll see that in IE6, there's a big gap of emptiness. Any idea why this is happening? Thanks in advance. Daniel Hammond www.objectivedesigns.com Woks fine for me on IE6/7, Opera, FF. 42 pics all there. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.408 / Virus Database: 268.13.4/477 - Release Date: 16/10/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Large gap
| URL: www.objectivedesigns.com | | If you go to the photography page and scroll about 2/3 of the way | down through the photo thumbnails, you'll see that in IE6, | there's a | big gap of emptiness. Any idea why this is happening? | | Woks fine for me on IE6/7, Opera, FF. | 42 pics all there. Well this is strange. In a good way though. The problem seems to have fixed itself. BUT, there are still problems with my new site: www.objectivedesigns.com/2/photography.htm. If this one doesn't choose to magically fix itself before you guys get a chance to take a look at it, you should see what's going on there (tested in firefox, opera, and IE 6 and 7. FF and opera display correctly, but the IE's are the ones that show the problem). Daniel Hammond www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Large gap
~davidLaakso wrote: Daniel Hammond wrote: URL: www.objectivedesigns.com If you go to the photography page and scroll about 2/3 of the way down through the photo thumbnails, you'll see that in IE6, there's a big gap of emptiness. Any idea why this is happening? Unless I am really missing something, I do not see what you describe in xp ie6.0. Regards, ~dL Hi Daniel, I see the problem ( IE6 on Win98SE ) ! http://home.tiscali.nl/developerscorner/css-discuss/images/objective-gap.gif The problem will magically solve itself with a little help :-) : adding a doctype to the thumbnails-page. Then you are loosing the IE-only colored scrollbar, but winning a good display. See testpage http://home.tiscali.nl/developerscorner/css-discuss/test-objective.htm. Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Large gap in IE
Hi all. My site is here: http://83.146.40.74/sample_dynamic.php All good in FF, but in IE there is a significant gap between the content and the nav. Thought it was the double margin bug but display:inline on the nav didn't fix it. Any ideas? -- http://www.web-buddha.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Large gap in IE
Subject: [css-d] Large gap in IE Hi all. My site is here: http://83.146.40.74/sample_dynamic.php All good in FF, but in IE there is a significant gap between the content and the nav. Thought it was the double margin bug but display:inline on the nav didn't fix it. Any ideas? -- I must be going mad. I cannot see the gap in any browser. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.407 / Virus Database: 268.13.0/464 - Release Date: 05/10/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Large gap in IE
Dave Goodchild wrote: Hi all. My site is here: http://83.146.40.74/sample_dynamic.php All good in FF, but in IE there is a significant gap between the content and the nav. Thought it was the double margin bug but display:inline on the nav didn't fix it. Any ideas? Center the box in ie. You have it flush right in that browser. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Large gap in IE
Dave Goodchild wrote:
Yeah, I know it's flush right, but I can't seem to centre it in IE
using the usual text-align workaround. Am I missing some brain cells
today?
In reference to your uri and off-list reply to me:
* html #content { delete this selector
padding-left: 5%;
padding-right: 5%;
}
body {
text-align: center; add
}
#wrapper {
text-align: left;add
margin: 0 auto;add
position: relative;delete
left: 50%;delete
margin-left: -45%; delete
}
You'll need to re-adust a little in ie, but (I think) you'll be in the
ball park.
And others on the list may have a better solution.
Regards,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Large gap appearing in IE6
Luke Mackenzie wrote: Hi, I am having an issue with IE6 which I just can't seem to resolve. snip The page in question is here: http://mixdoaa1.miniserver.com/~staging/members/index.php?sid=ed1147f3c538f4 e95852105ad46eafad snip See http://www.csscreator.com/css-forum/ftopic10373.html It's a bit impolite to scattershoot, posting to multiple fora and lists. Give one a chance before trying another. cheers, gary -- Anyone can build a usable web site. It takes a graphics designer to make it slow, confusing, and painful to use. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Large gap appearing in IE6
Hi, I am having an issue with IE6 which I just can't seem to resolve. I have searched the css-org site and checked on positioniseverything.net but can't seem to find a bug fix for my particular problem. I have vaildated the html and css at w3c - no problems. I would be very grateful if a css expert out there could help me out. I need to deliver the website this week and so I am under time pressure. I think the problem relates to the #nav container as if i remove the width setting from there, the problem also occurs in Firefox. The page in question is here: http://mixdoaa1.miniserver.com/~staging/members/index.php?sid=ed1147f3c538f4 e95852105ad46eafad To complicate matters, the navigation on the left is coming from a different file to the forum content on the right. To see the problem, view the page first in Firefox and then in IE6 - there is a huge unwanted gap between the the sections on the page. The easiest way to see the css is to view the page source as the css is actually coming from a .tpl file which you won't be able to access. Many thanks for any replies. I do hope someobdy out there can help. Regards, Luke Mackenzie - York, England. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
