[css-d] Floats in IE6 ... again :-(
Hi,
I am having a problem with a floated element in IE6. Big surprise :o)
I have read many posts here as well as many of articles on the subject,
including this very recent one: http://bit.ly/clrfxReloaded , and have
tried , in vain, to apply what I thought I learned to my problem.
The page in question is here:
http://dl.dropbox.com/u/2488267/untitled%20folder/Toolbox_template_15_Oct_2010.html
The code for the floated element in the IE specific css is :
article {
height: auto;
/* for IE */
width: 45%;
background:#ddd;
color:#5e7497;
float:left;
margin:0 18px 22px 0;
padding:15px 15px 65px;
border:#abb9d8 1px solid;
}
No other elements on the page are floated.
In IE the first two boxes Overview and Links appear as expected. In the
second row however, the float somehow breaks and pushes the faq box down
and shifts the templates box to the right.
Oddly enough, adding additional text to the Links box fixes the float
position of the two boxes ... faq and templates.
Any hints or tips would be greatly appreciated.
For good measure the full IE specific .css is here:
http://dl.dropbox.com/u/2488267/untitled%20folder/toolboxIE.css
Thanks in advance,
Tony
__
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] Floats in IE6 ... again :-(
I found a solution, but it is not very elegant.
First I updated the css by changing the margin declaration for the
article element. Second I added a class of .left and applied it in the
HTML to the two article elements I wanted to place well ... on the left.
Here is the .css snippet :
article {
height: auto;
/* for IE */
width: 45%;
background:#ddd;
color:#5e7497;
float:left;
/* changed from margin:0 18px 24px 0; */
margin-bottom:24px;
padding:15px 15px 65px;
border:#abb9d8 1px solid;
}
/* added class to every other article element and gave them a right margin
*/
.left {
margin-right:24px;
}
and a link to a page which behaves in IE6. The .css linked below is
unchanged except from the lines above.
http://bit.ly/IE6fixed
I arrived at the solution mostly through trial and error and am not 100%
clear on what was wrong to begin with and how switching the margin
declarations fixed it.
If anyone cares to enlighten me, it would be appreciated :-)
/ Tony
On Wed, Oct 20, 2010 at 10:27 AM, Anthony L antl69or...@gmail.com wrote:
Hi,
I am having a problem with a floated element in IE6. Big surprise :o)
I have read many posts here as well as many of articles on the subject,
including this very recent one: http://bit.ly/clrfxReloaded , and have
tried , in vain, to apply what I thought I learned to my problem.
The page in question is here:
http://dl.dropbox.com/u/2488267/untitled%20folder/Toolbox_template_15_Oct_2010.html
The code for the floated element in the IE specific css is :
article {
height: auto;
/* for IE */
width: 45%;
background:#ddd;
color:#5e7497;
float:left;
margin:0 18px 22px 0;
padding:15px 15px 65px;
border:#abb9d8 1px solid;
}
No other elements on the page are floated.
In IE the first two boxes Overview and Links appear as expected. In the
second row however, the float somehow breaks and pushes the faq box down
and shifts the templates box to the right.
Oddly enough, adding additional text to the Links box fixes the float
position of the two boxes ... faq and templates.
Any hints or tips would be greatly appreciated.
For good measure the full IE specific .css is here:
http://dl.dropbox.com/u/2488267/untitled%20folder/toolboxIE.css
Thanks in advance,
Tony
__
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] positioning images on a background graphic
The easiest solution is to add...
#container {
padding: 1px 0;
}
Thanks Georg, that seems to have done the trick :-)
And thanks for the link ...
best,
Anthony
__
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] positioning images on a background graphic
Is not that big a problem, but I am seeing a shift in the images when
viewing the page on IE windows.
I know: big surprise.
Basically, I have a container div and then an unordered list where
each list item is an image.
Here's the relevant css :
#container {
background:blue;
width: 735px;
height: 500px;
margin: auto;
background: url(banner_back.jpg) no-repeat;
}
ul {
list-style: none;
padding-top: 240px; /* to move the list into position on the
background graphic */
padding-left: 75px;
}
li
{
float: left;
margin: 0 0.15em;
}
img {
border-style: none;
}
a {
border: none;
}
and here is a link to the page ...
http://liberto.info/cssplay/fromWork/migration_rollover/migration_opacity_tests_part_b.html
Another thing that perplexes me is that if I a margin-left value to
the ul instead of padding-left the images are placed correctly in IE
and then are shifted in Firefox.
Can anyone tell me which IE bug I am missing ?
Thanks :-)
Tony
__
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] positioning images on a background graphic
On Fri, May 15, 2009 at 12:40 AM, Erik Vorhes e...@textivism.com wrote: re: http://liberto.info/cssplay/fromWork/migration_rollover/migration_opacity_tests_part_b.html Anthony, the original poster, has followed your advice as of this writing. He has included display:inline; on the li. Follow the above url and note your suggestion does not fix IE/6. Nor does it fix IE/7. What I suggested is not the only way to correct the problem. But it does work in IE/8, FF, Opera, and Safari. IE/6 and IE/7 go along for the ride without issue. Please see: http://chelseacreekstudio.com/ca/cssd/arrow.htm I apologize, I didn't know that Anthony had attempted my proposed fix. Hi both, Sorry, I made the change and didn't have to opportunity to test it in IE ... that was why I hadn't replied yet ... . This CSS will bring IE 6/7/8 on board with FF, Safari, Opera. Thanks for the tip. I've added the code and it looks OK in FF and Safari on OSX ... I can't check on a Win box before later this morning when I get to work. A question though: I thought the 1px border was just for debugging ... But if I comment out the #container border, the button images shift right to the top of the div ... any idea why? thanks again, Anthony __ 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] Sprites and positioning links
Hi again, the heights are different between the default and the hover. I recreated the .gif, this time using the PS duplicate command to get an exact copy of the image. I then uploaded both images, the original and the over state .gif, to this online sprite generator: http://www.csssprites.com/ Unfortunately, I am still having the same problem positioning the lib link. I'll keep trying a repost if I find a solution ... Anthony __ 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] Sprites and positioning links
Hi Brian, thanks, the tip below helped :-) you will need to float metadata to the left As you can see from the link below, I am still struggling to place the lib rollover correctly. http://www.liberto.info/cssplay/www/www/cssplay/sprite/sprites.html It could be a problem with the image as you suggest: I'll have to look more closely at that. On the other hand, the first 2 links rollovers work fine, and I am having trouble seeing what the difference is between these a lib. On a side note, I changed the image format to .gif , as the .png was causing IE 6 to show an initial black box on the overview link. Tony __ 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] Sprites and positioning links
First: If this is a repost I apologize: I chose plain text in GMail
but in my Sent box it appears it was sent as Rich Text, so I'm
attempting a plain text message again ...now for the 3rd time, with
most html tags stripped out ... it got bounced a few times now :-(
If you've already stopped reading, I'll understand ;-))
---
Hi,
I am trying to use css sprites to create rollover links on several
different spots on an image.
Essentially: an image map.
I've pieced the code below together from a few online articles and
having been finding the image coordinates using photoshop.
My dilemma is this: for the first two links overview and metadata
everything works as expected. But for the third one lib, no matter
what I do, the rollover effect seems anchored to the left corner.
I've included the code below, in case there are any obvious errors
that I am too blind on inexperienced to see ;)
Here is the working link ... I've used a .png image so it loads a little slowly.
the link:
liberto.info/cssplay/sprite2.html
Any help would be greatly appreciated :-)
Tony
the css:
.myspriteClass {
background: url('newsprite.png');
background-position: -223px -223px; width: 600px; height: 446px;
}
/* links on image */
a#overview {
height:26px;
width:590px;
display: block;
background:url('newsprite.png') 0px 0px no-repeat;
overflow: hidden;
}
a#overview:hover {
display: block;
background:url(newsprite.png) -223px -1115px no-repeat;
overflow: hidden;
}
a#metadata {
height:27px;
width:192px;
display: block;
background:url('newsprite.png') 223px 253px no-repeat;
overflow: hidden;
}
a#metadata:hover {
display: block;
background:url(newsprite.png) -223px -1140px no-repeat;
overflow: hidden;
}
a#lib {
height:27px;
width:317px;
display: block;
background:url('newsprite.png') 426px 254px no-repeat;
overflow: hidden;
}
a#lib:hover {
display: block;
background:url(newsprite.png) -426px -1147px no-repeat;
overflow: hidden;
}
the html
div class=myspriteClass
a id=overview href=# /a
a id=metadata href=# /a
a id=lib href=# /a
/div
__
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] Fwd: Form in header: placement problems in IE win
Good idea to turn on borders it really helped me visualize where
the form was and how it looked.
The revised code looks like this:
(the float and width attributes have been removed)
#header form { /* The search form */
/*border: 3px solid #C03; */
margin-bottom: -100px;
text-align:left;
padding: 110px 10px 55px 600px;
}
Still breaks in IE win though :-((
I'm thinking it may be a problem with the stacking order the main
nav DIV seems to be on top of the header DIV.
On the other hand, the form seems to fill the entire width, so
changing the stacking order (with z-index?) might block/ obscure the
tabs, I'm afraid.
but I figured it out by
setting borders on all the elements in the form. Maybe it was
that I had to set a width on it; not sure though.
--
Els
http://locusmeus.com/
http://locusoptimus.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] Clearing 2 floated content areas
http://www.itu.dk/people/antl/Webdesign_06/vestervold148/test1/vestervold148_v2/hjem.html
First, the white color behind the tabbed navigation does not extend
to the far right of the page as it does in Firefox, for example. I
thought I'd fixed this by giving the #nav div a fixed width of 713px.
But IE won't play nice.
Add...
* html ul#nav {width: 100%;}
...as a correction for IE only.
The other, more serious problem is that the footer div no longer
clears the floats and thus my footer now appears to be more of a
belt, than a footer :-(
Set...
#container {height: auto;}
...since IE doesn't know that 'height: 100%' should default to 'height:
auto' in such a layout.
I have only tested the above with inline-styles and made sure it works.
I've also only tested in Firefox 1.5.0.1, Opera 9tp2 and IE6, where all
3 browsers rendered a copy of your page (with changes) identical.
regards
Georg
A quick answer as always and right again Georg.
Thanks :-))
Tony
__
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] Clearing 2 floated content areas
Hi all, I know there are a million articles on the subject, but I am stumped. On a previous incarnation of this page I sucessfully used the footer div to clear the tow opposingly floated content areas. Recently, I updated the code to center the content in the browser. This caused 2 problems in Explorer which baffle me :-( See here: http://www.itu.dk/people/antl/Webdesign_06/vestervold148/test1/vestervold148_v2/hjem.html First, the white color behind the tabbed navigation does not extend to the far right of the page as it does in Firefox, for example. I thought I'd fixed this by giving the #nav div a fixed width of 713px. But IE won't play nice. The other, more serious problem is that the footer div no longer clears the floats and thus my footer now appears to be more of a belt, than a footer :-( Ideas? Or pointers to where I might read more on this subject? I've read through the complexsprial article and the easyclearing article on positioniseverything, but couldn't see how to apply that knowledge to this situation. Thanks :-) Tony __ 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] Body background image not displaying properly... in IE :-(
Hi all, I have a background image that should provide a nice yellow (well, nice is realtive ;-)) ) color behind a floated div which uses % for it's width. In Firefox and Safari, the image cascades down the page providing the expected background for the #secondaryContent div. In Windows IE6 however, the yellow background only displays properly once the page is reloaded or (oddly) when one of the secondary nav links, such as item one, is moused over. Here is the link to the offending page: http://www.itu.dk/people/antl/vestervold148_help/hjem.html One other thing: the image displays properly when clicking the first 2 tabs: Bestyrelsen and Om huset. Maybe this is because the image is already loaded into the cache? Thanks in advance for any help... Anthony __ 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] Body background image not displaying properly... in IE
Anthony L wrote:
In Windows IE6 however, the yellow background only displays properly
once the page is reloaded or (oddly) when one of the secondary nav
links, such as item one, is moused over.
http://www.itu.dk/people/antl/vestervold148_help/hjem.html
Looks like IE6 needs a 'hasLayout'[1] trigger.
* html container {height: 100%}
...will do the trick.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
Thanks for the quick answer Georg. I don't have access to a windows
box before tomorrow though...seeing is believing.
The link looks helpful too: I'd never even heard of hasLayout before
today. so much to learn :-)
__
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] Body background image not displaying properly... in IE
In Windows IE6 however, the yellow background only displays properly
once the page is reloaded or (oddly) when one of the secondary nav
links, such as item one, is moused over.
http://www.itu.dk/people/antl/vestervold148_help/hjem.html
Looks like IE6 needs a 'hasLayout'[1] trigger.
* html container {height: 100%}
...will do the trick.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
Made the change and had a friend take a screenshot. No luck :-(
But then I noticed something abovethe line should be
* html #container {height: 100%} the # was missing.
A second screenshot confirms that it is working as expected.
Thanks again :-)
__
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] Header graphic causing excessive space above body text in Explorer
Hi Georg,
Thanks :-) That worked perfectly and helped me understand some of Explorers
many quirks :-)
Tony
Anthony L wrote:
I have a two-column liquid layout with a header and footer. The
columns are floated and defined with a 70% / 30% width.
IE/win doesn't like that... :-) see below.
i have an image in the h1 element in the header which overflows into
the primary content area. I've achieved this by using padding on the
h1.
Problem:
IE6 (and older versions) will expand the header until h1 fits inside.
Solution - make h1 appear smaller by adding...
#header h1 {
margin-bottom: -100px;
position: relative;
}
which pulls up the bottom of the h1 so IE won't react on it.
Note also that the 'position: relative' is needed so the overshooting
part of h1 remains visible in IE/win.
It looks fine in Firefox on both Mac and Windows. But in IE 6 on
windows the text in the primary content area is pushed down. I assume
the problem is to do with the padding, but I'm not sure how to fix
it.
http://www.itu.dk/people/antl/css_play/exp_1.html
Problem:
IE does has calculation-bugs, so primaryContent width: 65% +
padding-right: 5% + navigation width: 30% will result in more than 100%,
thus primaryContent gets pushed below navigation in order to fit.
Solution:
#primaryContent{
margin-right: 5%; -- delete this
}
as a margin isn't needed between those two floats, as they are
floated in opposite directions. The empty area between those floats
gives IE/win some space to put its bugs in ;-)
__
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] Header graphic causing excessive space above body text in Explorer
Hi all, Let me start by saying I'm quite new to CSS layouts. Let me also say that I've adapted bits and pieces of CSS I've found among other place in Dan Cederholms Bulletproof web design. Although I thought I understood the workings of this code, as you'll see below there is obviously a gap in my knowledge ;-) I have a two-column liquid layout with a header and footer. The columns are floated and defined with a 70% / 30% width. i have an image in the h1 element in the header which overflows into the primary content area. I've achieved this by using padding on the h1. It looks fine in Firefox on both Mac and Windows. But in IE 6 on windows the text in the primary content area is pushed down. I assume the problem is to do with the padding, but I'm not sure how to fix it. http://www.itu.dk/people/antl/css_play/exp_1.html A quick search of this list using the keywords Explorer and header didn't turn up anything quite like this problem :-( Can anyone help? Thanks :-) __ 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/
