[css-d] Gap between divs in IE6
I've been trying to fix this till I can't remember my own name: I have a page that looks just as I want in FF but which misbehaves in IE6, showing a gap between divs. Link: http://www.pauljinks.co.uk/test/contentTemplate2.html I've stripped down everything to identify the offending code, which looks like this: The idea is that the content of #objective appears in a nice rectangle with rounded corners, the top and bottom of said rectangle being contained by #main-top and #objectiveBot. here's my css: body { margin: 0px; padding: 0px; } #container { width: 770px; margin: auto; } #main-top { height: 16px; width: 770px; background-image: url(..); background-repeat: no-repeat; } #container #objectiveBot { background-image: url(..); background-repeat: no-repeat; width: 770px; height: 23px; } #container #objective { background-image: url(...); background-repeat: repeat-y; width: 770px; } I know it's something pretty obvious, but I can't see the wood for the wotsits here. Please help. Paul __ 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] Gap between divs in IE6
Gunlaug Sørtun wrote: > Paul Jinks wrote: >> I have a page that looks just as I want in FF but which misbehaves in >> IE6, showing a gap between divs. >> http://www.pauljinks.co.uk/test/contentTemplate2.html > > The simplest and most reliable solution is to put an html comment in the > empty divs, to prevent IE/win from seeing whitespace in there. > > > > > > > IE6 will otherwise treat those divs as if they're one line-height tall, > since that and older IE/win versions don't respect declared dimensions > and will auto-expand the divs in height to make room for an imaginary > space. > > regards > Georg Thanks Georg It took me a while to get round to testing this: I found that the comments fixed the problem in IE6, but introduced gaps in FF! I'm not sure why this should happen. Tim Palac's approach, setting #main-top { ... background: url(...) no-repeat bottom left;} did the job in both browsers. Again, I have no idea why! Paul __ 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] Gap between divs in IE6
Hi Tim Many thanks for this. It worked like a dream. Incidentally, I tried putting the same CSS rules in separately: background-image: (url...); background-repeat: no-repeat; background-position: bottom left; and it didn't seem to work (yes, I'm a Dreamweaver user). Strange, eh? Cheers Paul Tim Palac wrote: > Paul, > > This was a frustrating one! Anyway, after much fooling I replaced the > css for #main-top with the following: > > #main-top { > height: 16px; > width: 770px; > background: url(...) no-repeat bottom left; > } > > This works great in IE6, IE7, and Firefox for me. For some reason it > was just IE6 the old version wasn't working in, guess it has weird > issues with background placement. > > Tim > AIM: TymArtist > www.timpalac.com <http://www.timpalac.com> > > On Thu, Feb 21, 2008 at 10:21 AM, Paul Jinks <[EMAIL PROTECTED] > <mailto:[EMAIL PROTECTED]>> wrote: > > I've been trying to fix this till I can't remember my own name: > > I have a page that looks just as I want in FF but which misbehaves > in IE6, > showing a gap between divs. > Link: http://www.pauljinks.co.uk/test/contentTemplate2.html > > I've stripped down everything to identify the offending code, > which looks > like this: > > > > > > > > The idea is that the content of #objective appears in a nice > rectangle > with rounded corners, the top and bottom of said rectangle being > contained > by #main-top and #objectiveBot. > > here's my css: > > body { >margin: 0px; >padding: 0px; >} > > #container { >width: 770px; >margin: auto; >} > > #main-top { >height: 16px; >width: 770px; >background-image: url(..); >background-repeat: no-repeat; >} > > #container #objectiveBot { >background-image: url(..); >background-repeat: no-repeat; >width: 770px; >height: 23px; >} > > #container #objective { >background-image: url(...); >background-repeat: repeat-y; >width: 770px; >} > I know it's something pretty obvious, but I can't see the wood for the > wotsits here. > > Please help. > > Paul > > __ > css-discuss [EMAIL PROTECTED] > <mailto:css-d@lists.css-discuss.org>] > 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://evolt.org> -- > http://www.evolt.org/help_support_evolt/ > > __ 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] Breaking out of a div
Hi First the back story: I'm working at a university using a piece of web authoring software called Course Genie. Teaching staff write their materials in Word, hit generate and out pops the web page. Fine. My job is to write templates so this looks pretty, however, the html leaves few hooks work with on. Basically there's Assorted other html tags One option I'm looking at is to use the h1 element to introduce a little graphical flavour. So far so good. Here's my problem: I've set a background image to the h1 element, and using negative margins and padding etc. I'm trying to get it to 'pop' out of the containing div. In Firefox2 for win this works more or less as I want it to, but in IE6 the part of the image outside the containing div cannot be seen. Any solutions? link: http://www.pauljinks.co.uk/itc/cgexperiments/ Many thanks in advance Paul -- Check out my website: http://www.pauljinks.co.uk :o) __ 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] Breaking out of a div
Thanks to everyone for helping out with this Paul Philippe Wittenbergh wrote: > On Apr 11, 2008, at 12:05 AM, Paul Jinks wrote: > >> Hi >> >> First the back story: I'm working at a university using a piece of web >> authoring software called Course Genie. Teaching staff write their >> materials in Word, hit generate and out pops the web page. Fine. >> >> My job is to write templates so this looks pretty, however, the html >> leaves few hooks work with on. Basically there's >> >> >> >> Assorted other html tags >> >> >> One option I'm looking at is to use the h1 element to introduce a >> little >> graphical flavour. >> >> So far so good. Here's my problem: >> >> I've set a background image to the h1 element, and using negative >> margins >> and padding etc. I'm trying to get it to 'pop' out of the containing >> div. >> In Firefox2 for win this works more or less as I want it to, but in >> IE6 >> the part of the image outside the containing div cannot be seen. Any >> solutions? >> >> link: http://www.pauljinks.co.uk/itc/cgexperiments/ >> > > The parent container 'hasLayout'. [1] > This should work: > h1 {position:relative; zoom:1;} > > [1] <http://www.satzansatz.de/cssd/onhavinglayout.html> > > 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-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] Margin (?) issue in IE6
Yet another "it looks fine in FF but all messed up in IE" request for help, I'm afraid. I have a page generated by a "Word to Web" tool with this structure: Always h2 here etc. I've put background images on #header and #main-content-notoc and positioned them just so. In Firefox, it's as I want it. In IE6 there appears to be a 37-ish px margin at the top of #header, pushing everything down and messing the whole thing up. Link: http://www.pauljinks.co.uk/itc/literacyTest/page_01.htm CSS: http://www.pauljinks.co.uk/itc/literacyTest/cg.css Many thanks in advance - I really am not worthy. Paul Jinks __ 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] Border makes gap between divs disappear
I have a two column layout with each column divided into two boxes (thus a kind of faux table). This is for navigation and each box contains a definition list, the dl's in the right column being floated right: http://www.librarydevelopment.group.shef.ac.uk/sandpit/columns.html CSS looks like this: #wrap { margin:auto; width: 800px; } #rightcol { width: 400px; float: right; } #leftcol { width: 400px; } As you can see, everything is more or less OK except that the bottom box in the left-hand column is about 13px below the bottom box in the right-hand column. While showing this to a colleague, i put a border on the bottom right hand box for emphasis and... the gap disappeared: http://www.librarydevelopment.group.shef.ac.uk/sandpit/columns-border.html (in FF3, IE8 and Opera) I'd be really grateful for an explanation - and a solution. Paul Jinks __ css-discuss [cs...@lists.css-discuss.org] 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] Border makes gap between divs disappear
Thanks David That's really useful information, as well as a fix that's saved me hours of hitting my head on the keyboard. Paul On 10 March 2010 18:24, David Laakso wrote: > Paul Jinks wrote: >> I have a two column layout with each column divided into two boxes >> (thus a kind of faux table). This is for navigation and each box >> contains a definition list, the dl's in the right column being floated >> right: >> http://www.librarydevelopment.group.shef.ac.uk/sandpit/columns.html >> >> CSS looks like this: >> #wrap { >> margin:auto; >> width: 800px; >> } >> >> #rightcol { >> width: 400px; >> float: right; >> } >> >> #leftcol { >> width: 400px; >> } >> >> As you can see, everything is more or less OK except that the bottom >> box in the left-hand column is about 13px below the bottom box in the >> right-hand column. >> >> While showing this to a colleague, i put a border on the bottom right >> hand box for emphasis and... the gap disappeared: >> http://www.librarydevelopment.group.shef.ac.uk/sandpit/columns-border.html >> (in FF3, IE8 and Opera) >> >> I'd be really grateful for an explanation - and a solution. >> >> Paul Jinks >> > > > > The explanation is margin collapsing. > <http://www.w3.org/TR/CSS2/box.html#collapsing-margins> > <http://complexspiral.com/publications/uncollapsing-margins/> > The fix is: > #col2 #bottom { > /*border: solid red 1px;*/ > padding-top: 1px; > } > > Best, > ~d > > > > > -- > desktop > http://chelseacreekstudio.com/ > mobile > http://chelseacreekstudio.mobi/ > > __ > css-discuss [cs...@lists.css-discuss.org] > 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-discuss [cs...@lists.css-discuss.org] 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] navigation list has gaps in FF
Hi I have a top horizontal nav list css as follows. and so on. This divides the top nav area into 4 areas for 4 links. In FF, the whole of each of these is clickable. In IE6, only the text is clickable. I've tried to get round this by setting a width for , either with px or %, but this seems to screw up the whole thing for IE. Any idea what's going on? and how to fix it? See the page here: http://www.annjinkscounselling.co.uk/contact.htm CSS at: http://www.annjinkscounselling.co.uk/css/annjinks.css I'd be grateful if someone could take a look at this for me, I can't see the wood for the trees any more. Thanks Paul __ 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] Making whole of navigation list item area clickable in IE
Hi I have a top horizontal nav list css as follows. and so on. This divides the top nav area into 4 areas for 4 links. In FF, the whole of each of these is clickable. In IE6, only the text is clickable. I've tried to get round this by setting a width for , either with px or %, but this seems to screw up the whole thing for IE which wants to shunt the last list item onto a new line. Any idea what's going on? and how to fix it? See the page here: http://www.annjinkscounselling.co.uk/contact.htm CSS at: http://www.annjinkscounselling.co.uk/css/annjinks.css I'd be grateful if someone could take a look at this for me, I can't see the wood for the trees any more. Thanks Paul Some of you may have noticed that this message was previously posted with the subject: "navigation list has gaps in FF". I fixed that one myself, and then forgot to change the subject for the email I was writing. D'oh! __ 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/
Re: [css-d] Making whole of navigation list item area clickable in IE
Steve Clason wrote: > I gave "ul#navlist li a" a 100% width and it seemed to work OK locally. > > > ul#navlist li a { > display: block; > width: 100%; /* new */ > padding: 0.2em; > border-width: 1px; > border-color: #ffe #aaab9c #ccc #fff; > border-style: solid; > color: #EAF5F7; > text-decoration: none; > background: #8C9BB0; > } > Hi Steve, Thanks for taking a look. Are you viewing this in IE6 for windows? On my machine, if I set width at 100%, this moves the last nav link down a line. In FF, makes no difference, but the problem that kicked this off was only in IE anyway. I can get around it by changing the width of ul#navlist li to 193px, (bigger than that and it pushes the last link down again) but this leaves a gap at the right of the navlist which I'm not keen on. I thought that IE's problems with widths had been resolved in IE6. Am I wrong? > While I was poking around I noticed this (actually TopStyle noticed it): > > #maincontent { > font-color: teal; > color: #003366; > > There's no selector "font-color" so you should probably just delete it > in favor of the following "color". > Thanks for this. Looks like the product of a late session. :-) Do you recommend TopStyle, does it have some kind of syntax checker? Paul __ 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] Definition list problems
Hi I've got a page displaying a bunch of data in two columns. I wasn't sure whether to go with a table or definition list for this. I don't think there is much in it, really, but went for a definition list. I wanted it to display kind of like a table though. :p Here's what I've done so far: html: etc. etc... CSS: #maincontent {width: 800px etc} #detail dl { border-bottom: 1px solid #CC; padding: 0px; margin: 0px; } #detail dl dt { width:200px; padding-left: 5px; float: left; } #detail dl dd { margin-left: 200px; } In FF, this looks OK until one of the dt's wraps to the next line at which point everything goes out of whack. This is where it says: "Name of person submitting project details". In IE6, things are worse still. The dt's don't display at all. You can view the page at: http://www.pauljinks.co.uk/house/detail.php?projTitle=A%20ricardo%20le%20duele%20la%20garganta. and the CSS at: http://www.pauljinks.co.uk/css/detail.css Sorry about the massive URL and the silly content. TIA Paul __ 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/
Re: [css-d] Definition list problems
Martin Heiden wrote: >>You can view the page at: >>http://www.pauljinks.co.uk/house/detail.php?projTitle=A%20ricardo%20le%20duele%20la%20garganta. >>and the CSS at: >>http://www.pauljinks.co.uk/css/detail.css > This is a table and there is nothing wrong with using a table for > markup. You should use tables for tabular data. I guess. Certainly a table isn't "wrong" here. I'd like to know what the problem is, even so, if anyone has the time to look. > PS: At least you escaped the input of the search box... ;-) Verdad! Thanks Paul __ 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] Text after nav div displays inline in FF
Hi all I've been struggling with this for a while. I know I'm missing something really obvious [maybe to do with the use of the "float" properties my choice of widths] but what? In IE the text following the div #topNav appears beneath it, like I intend it to, but in FF it appears to the right. Both #topNav and have "block" display values, so what's up? Link: http://www.medelearning.group.shef.ac.uk/mathslinks.htm All style info is at the top of the source page. I've tried to simplify the page as much as poss. Many thanks for taking the time to look at this. __ 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] Background area too big in IE6/XP
Hi all I have a banner which contains a centered image: CSS: #header { color: #000; background-image: url(../images/bullet1.gif); background-repeat: repeat; margin-bottom: 0px; margin-right: 10px; margin-top: 5px; margin-left: 10px; } See: http://www.shef.ac.uk/cscy/index.htm css is at: http://www.shef.ac.uk/cscy/css/index.css In Firefox, this displays fine, but in IE6/XP I get a thin area containing the background image at the bottom of the banner image. The width of this border seems to increase if I increase the text-size on the browser. Any idea what's going on? As ever, many thanks for your help. Paul __ 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/
Re: [css-d] Background area too big in IE6/XP
Thanks Gary Display: block was fine this time, but there's bound to come a time when it isn't. Paul __ 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/
Re: [css-d] Advice Please
Hi Rich I think the CSS for your page is actually at: http://www.lamaison.org.uk/pages2.css If you put within the "content" div, that will do the trick. It looks like you may not need the banner div at all, you could just style h1 directly in your stylesheet. Cheers Paul __ 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] Put gap in list styled for navigation
Hi I've got a that I've styled as a nav bar. Fine. My client has now asked to have a gap the width of 1 list item to separate the last two list items as they are links to external sites. If you want to take a look, go to: http://www.digitalbeginnings.shef.ac.uk Here's the basic code: xhtml Home Background to the study Research Aims and Questions Methodology etc css ul.sidenav { width: 150px; margin-top: 0px; margin-bottom: 0; margin-left: 0; position: relative; margin-right: 447px; padding: 0px 0px 175px; background-image: url(../images/sponsors.gif); background-repeat: no-repeat; background-position: center bottom; etc } #sidenav ul{ margin: 0; padding: 0; } #sidenav li { list-style-type: none; margin: 0px; text-align: center; padding: 0; } All I have to do, I thought was introduce a class extLinks: li.extLinks { margin-top: 10px;} yet when I apply this to the first external link, nothing happens. OK, so I tried introducing a with two s one on top of the other. Still nothing. I'm missing something really obvious, right. But what? TIA Paul http://www.pauljinks.co.uk { __ 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] Put gap in list styled for navigation IE problems
First - big thanks to everyone who replied on this one (see below). In the end I went with two lists, seemed most "correct" and put a margin-bottom in to separate them. However, when I view this in IE6/XP, the line dividing the top two links disappeared. everything else checks out fine - but no line there. I can't see anything in there to cause this, and it doesn't happenn FF/NN. If anyone could suggest a fix, I'd get them a latte. Site launch is on Monday ;-) Link: http://www.digitalbeginnings.shef.ac.uk css: http://www.digitalbeginnings.shef.ac.uk/css/index.css I've tried to keep the code fairly clean and easy to read. let me know if you think not. TIA Paul P.S.: Apologies to Steve for sending this to him instead of the list. A slip of the mouse. Steve Clason wrote: > On 10/26/2005 6:01 PM Paul Jinks wrote: > >> I've got a that I've styled as a nav bar. Fine. My client has >> now asked to have a gap the width of 1 list item to separate the last >> two list items as they are links to external sites. If you want to >> take a look, go to: http://www.digitalbeginnings.shef.ac.uk > > > > >> I'm missing something really obvious, right. But what? > > > I believe I'd go with two lists. > __ 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/
Re: [css-d] Put gap in list styled for navigation IE problems
Thanks Christian That fixed it. I can't figure out why, though. Is there some connection between specifying width and border display? Or is it just an IE thing? Anyway, you sorted it out in the nick of time. I owe you. Paul Christian Montoya wrote: >>First - big thanks to everyone who replied on this one (see below). In >> >>the end I went with two lists, seemed most "correct" and put a >>margin-bottom in to separate them. >> >>However, when I view this in IE6/XP, the line dividing the top two links >>disappeared. everything else checks out fine - but no line there. I >>can't see anything in there to cause this, and it doesn't happenn FF/NN. >>If anyone could suggest a fix, I'd get them a latte. Site launch is on >>Monday ;-) >> >>Link: http://www.digitalbeginnings.shef.ac.uk >>css: http://www.digitalbeginnings.shef.ac.uk/css/index.css >> >>I've tried to keep the code fairly clean and easy to read. let me know >>if you think not. >> >> >> > >This is what I did: > >#sidenav li { > list-style-type: none; > margin: 0px; > text-align: center; > padding: 0; > display: block; > border-bottom-width: 1px; > border-bottom-style: solid; > border-bottom-color: #ccc; > color: #036; >width:100%; /* SEE THIS? */ >} > >Did that work? > >-- >-- >C Montoya >rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com > > > > __ 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/