[css-d] Positioning Problems
Good morning fellow listers! The past couple days, I've been toying around with a test design for my yet-to-be-published website. Except for edges not lining up exactly, the design happens to work just about right with my current install of Firefox (I think it's FF6b2) on Win7. While the CSS I've hobbled together seems to get the job done, I don't think it's the most elegant or effective way to do it. I should also mention that the behavior almost works in IE9 as well, but the absolutely positioned elements don't stick where I think they're supposed to stick. Instead of attempting to describe the layout, I've included a link to a snapshot of how it's supposed to look (See: http://roenfanz.info/images/dcr_preview.png ). Since it's a test case, I thought I'd try out some HTML5, which probably causes rendering issues unless equipped with the most up-to-date browsers. (In retrospect, I should stick with my trusty HTML 4.01, but that's out of the prevue of this list.) Could the kind CSS Listers please go over my design and maybe help polish things up? See: http://roenfanz.info/projects/dcr.v2.5/ Thanks in advance, Darrin C Roenfanz __ css-discuss [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://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning Problems
On 5/08/2011 8:35 PM, Darrin Roenfanz wrote: Good morning fellow listers! The past couple days, I've been toying around with a test design for my yet-to-be-published website. Except for edges not lining up exactly, the design happens to work just about right with my current install of Firefox (I think it's FF6b2) on Win7. While the CSS I've hobbled together seems to get the job done, I don't think it's the most elegant or effective way to do it. I should also mention that the behavior almost works in IE9 as well, but the absolutely positioned elements don't stick where I think they're supposed to stick. Instead of attempting to describe the layout, I've included a link to a snapshot of how it's supposed to look (See: http://roenfanz.info/images/dcr_preview.png ). Since it's a test case, I thought I'd try out some HTML5, which probably causes rendering issues unless equipped with the most up-to-date browsers. (In retrospect, I should stick with my trusty HTML 4.01, but that's out of the prevue of this list.) Could the kind CSS Listers please go over my design and maybe help polish things up? See: http://roenfanz.info/projects/dcr.v2.5/ Thanks in advance, Darrin C Roenfanz I see nothing wrong in IE9. Are you sure you are not in IE8 mode? BTW, Since you are using HTML5, why are you not using type selectors like 'header' or 'nav'? -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [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://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning Problems
On 8/5/11 6:35 AM, Darrin Roenfanz wrote: http://roenfanz.info/images/dcr_preview.png Could the kind CSS Listers please go over my design and maybe help polish things up? See: http://roenfanz.info/projects/dcr.v2.5/ Thanks in advance, Darrin C Roenfanz I think you are tripping over your own code. Perhaps this will help get it started... http://chelseacreekstudio.com/dr.html Quick checked in Google, FF, Safari, IE/7 and IE/8. Use an html5 doctype if you prefer but you'll need to include the html5 shim if you do so. HTH. Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [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://www.evolt.org/help_support_evolt/
Re: [css-d] positioning problems (IE and Opera)
Elle Meredith wrote:
The logo is appearing behind the main image on the home page -- even
though it has higher z-index
Absolute positioned elements that are children of absolute or relative
positioned elements, can't escape their parents' stacking level, no
matter how high z-index is given to the children. A genuine IE/win bug.
Solution in your case is to stack the relative positioned parent higher
by adding...
#branding a {z-index: 1;}
...which will then lift the logo-image high enough too.
and on the gallery page, the stage images line up good when the page
loads -- but if you leave the page on for a little while, the top
background image appears and continues below the stage.
Jump triggered when hovering over image-links, so it is probably a
question of placing a 'hasLayout' trigger on the right element.
I can't debug it at my end since parts of the styling/scripting get lost
on download.
http://designbyelle.com.au/poinciana/
regards
Georg
--
http://www.gunlaug.no
__
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] positioning problems (IE and Opera)
Elle Meredith wrote:
...
the round corners in the main navigation -- one
corner does not align.
The site is at: http://designbyelle.com.au/poinciana/
#main-nav ul li a { /*screen.css (Line 68)*/
background: white url(../img/rounded-left.gif) no-repeat left bottom;
...
I think the white will paint over the preceeding gif.
Ingo
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.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/
Re: [css-d] positioning problems (IE and Opera)
Elle Meredith wrote:
...
In Opera 9 the main problem is that the logo is positioned too much to
the left. Also my stage on the gallery page is again positioned to the
left instead of right
The site is at: http://designbyelle.com.au/poinciana/
It is absolutely positioned, but it looks like as if Opera requires the
relatively positioned container,
#branding a {}
, to be at block level. Add display:block.
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.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/
Re: [css-d] positioning problems (IE and Opera)
Thank you Dmitry Demeshkin and Ingo Chao.
So, here's the problems and solutions again:
In IE 6 and 7:
#main-image not positioned right
Solution:
#additional-content {position:relative; width:450px; }
#home #main-image {position: absolute; top:0; left:0;}
divs pushed down
Solution: declared .prepend-1, .prepend-2, .prepend-3 {padding-left:
0;} in my ie.css
one of the texts pushed down in the gallery
Solution: removed class=span-2
In Opera (and Safari):
Logo is not position correctly
Solution: #branding a {display: block;}
Gallery's stage positioned too much to the left instead of right:
Solution:
I couldn't use display: block; which was the solution for the first
problem, so instead I declared div.inner {width: 100%;}
and to avoid width and paddings in the same rule, I redefined the
padding on the child elements
Last Problem: Navigation rounded corners.
Solution: added color to the background rule.
So in my case it was: background: white url(../img/rounded-left.gif)
no-repeat left bottom;
But I still have 2 last problems in IE -- if anyone has a minute to
have a minute to have a look:
The logo is appearing behind the main image on the home page -- even
though it has higher z-index
and on the gallery page, the stage images line up good when the page
loads -- but if you leave the page on for a little while, the top
background image appears and continues below the stage.
The site is at: http://designbyelle.com.au/poinciana/
Thanks once again,
Elle
__
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] positioning problems (IE and Opera)
Hi, I actually have a few problems with some elements and wanted to ask for your help. In IE (6 and 7): On the home page, the #main-image is positioned too much to the right and it is above the logo instead of below it. There are also a few divs that get pushed down: -- #featured-project on the home page -- #additional-content on the services page -- the text paragraphs in the gallery page In Opera 9 the main problem is that the logo is positioned too much to the left. Also my stage on the gallery page is again positioned to the left instead of right. One last thing (and I had this before but for some reason, I can't figure out how now): the round corners in the main navigation -- one corner does not align. The site is at: http://designbyelle.com.au/poinciana/ A lot of questions -- I know -- any help would be much appreciated. Cheers, Elle __ 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] Positioning problems
Hi,
I have 2 irritating problems, both to do with the positioning within
the heading area of my brother's website.
http://www.high-forest.co.uk/test/guestrooms.htm
1. I want the big blue title image Ingleside to remain centered in
the space to the right of the photo of the hotel, whatever the width
of the screen
'Clear: left' underneath this image moves all the following text too
far down.
2. I also want the words: Ingleside Guest House, Lynton, Devon to
always start on a new line
I have found that putting white-space: nowrap makes this work in
IE though I don't know why; but it doesn't work in FF
The header area coding is:
#header {
background-color: #ffc;
border-style: solid;
border-color: #c0;
border-width: 1px 0;
color: #c0;
padding-left: 0; }
#header img {
float: left;
border-color: #ffc; }
.heading-text-image {
margin: 1em auto; }
#header h2 { /* needs to start on a new line */
white-space: nowrap; /* works in IE! */
text-align: center;
margin: 1em auto;
padding: 0; }
#header h3 {
text-align: right;
padding: 0;
font-size: 100%;
margin-top: 0; }
The rest of the css is at
http://www.high-forest.co.uk/test/ingleside.css
Any help would be gratefully appreciated -- I'm out of my limited depth!
Rosemary,
Northumberland
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] positioning problems with IE6
Hello, I try to learn CSS2. I made my first pages, and they render as intended with Firefox 1.5 and Opera 9. Unfortunately, in IE6 it is a mess. Can someone tell me what I do wrong? http://www.umantec.nl/olland/ Thank you for your time. Fulko PS. I know about the IE6 PNG-transparency problems __ 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] positioning problems with IE6
vwf wrote:
http://www.umantec.nl/olland/
I try to learn CSS2. I made my first pages, and they render as
intended with Firefox 1.5 and Opera 9. Unfortunately, in IE6 it is a
mess. Can someone tell me what I do wrong?
Nothing much wrong with your CSS, but you are experiencing a few IE-bugs
and some default-style differences.
1: IE6 take dimensions from body, so 'width: 100%;' on #separator will
only be as wide as you have declared the body to be - 720px. No cure
that I know of - apart from using a page-wrapper div instead of body for
controlling width.
2: The IE whitespace bug is making separator dependent on font-size,
since IE sees a space in an otherwise empty element. This becomes
visible since IE doesn't respect declared dimensions, and will
auto-expand to make the imaginary space fit.
Simplest cure is to declare 'overflow: hidden' on #separator.
3: IE has default margins on lists, so you must declare 'margin: 0;' on
lists that shouldn't have one. This default-margin affects the #submenu
in particular, and IE's auto-expanding bug creates the overlapping.
4: IE has the 'em font-resizing bug'[1]. Simplest cure is to declare...
html {font-size: 100%;}
The rest is due to the IE PNG-transparency problems it seems, so no
extra cures should be needed unless I have missed something.
BTW: XHTML 1.1 isn't supposed to be used for pages served as
'text/html', according to W3C. Better to use XHTML 1.0 Strict.
regards
Georg
[1]http://www.gunlaug.no/contents/wd_additions_13.html
--
http://www.gunlaug.no
__
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] positioning problems
I am having to problems: 1: the navVert menu will not stay inside the wrapper 2. when hovering, it does not change colors Url: http://www.1954crestlineskyliner.com/index.htm Please help, Thank you, Sincerely, zinlover __ 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] positioning problems
On 1/16/06, Stuart King [EMAIL PROTECTED] wrote: I am having to problems: 1: the navVert menu will not stay inside the wrapper 2. when hovering, it does not change colors The color simply won't change because you have an invalid color code (you put an o instead of a zero. To make the absolutely positioned #navVert stay in the wrapper, add position: relative to #wrapper. Ricky __ 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] Positioning problems in IE6 using bottom:0;
On Sun, 15 May 2005 11:25:57 -0400, Tatham Oddie [EMAIL PROTECTED] wrote: Having some problems in IE getting something to sit at the bottom of the screen on http://testdrive.whatcanido.com.au/. If you look at that site in FF1.0.4 you'll see what I'm trying to achieve - however now I need to hack it down for other browsers. Sorry, no tips or help here (other than that you're coping with a 1383px by 928px background image)-- just some casual observation in Opera/FF: Opera8 and FF1.0.4 pretty much the same at 1280. At 1024 Budget, Suburb, Keyword kiss the left rail in both browsers. At 800 Opera8 throws an approx. 85px h-scroll bar and there's some horizontal overlap-- for example, Keyword is unseen and completely covered At 800 FF there's no h-scroll bar but some horizontal overlap but not as severe as Opera, and also some horizontal squishing of the content(although not nearly as severe as IE6.0). For example only t! of the word Right is #000, the rest of the letters are semi-transparent something in the range of #DDD. Basically - IE6 seems to be squashing the body element right up, which in turn is squashing the middle strip and pushing the footer underneath the middle strip. I've spent hours and still can't seem to make it work. (For browsers other than IE6 and FF1.0.4 - I haven't done much testing in other browsers yet and fully expect to have major breakages. If anyone has any Opera or Safari tips relevant to my design they'd be helpful.) Tatham Oddie Regards, David -- http://www.dlaakso.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/
