Re: [css-d] general css structure and positioning questions
Ron Zisman wrote:
http://www.ricochet.org/ricotest/ricotest.html
problem. file validates as css and xhtml 1, but it's not picking up
the background image i've assigned to the #outerwrap.
The background-image is picked up, but #outerwrap looks and behaves like
it's struck by collapsing margins[1]
Adding either...
#outerwrap {
float: left;
}
...or...
#outerwrap {
padding: 1px 0 0 0;
margin: -1px 0 0 0;
}
...will reveal the background-image.
These fixes also reveal a weak spot in the styling of h2, in that IE/win
has its own interpretation of 'margin:auto;' on these elements -
creating what looks like unwanted gaps in IE/win.
Change that to...
h2 {
margin: 0 auto;
}
...and IE/win will get back in line.
Declare specific top and bottom margins if you want any.
regards
Georg
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
--
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/
[css-d] Margin-top
Can anyone tell me why IE6 is positioning my text farther down the page than
Firefox?
http://www.samallman.com/consultingservices.html
The CSS rule is at #text {
The file called imagemap.css has the following code. I don't believe this
code has anything to do with the problem, but I provide it here just in case
/* CSS Style Sheet */
* {
padding: 0;
margin: 0;
}
#pic ul {/*causes IE6 and 7 to behave on hover over the
hotspots, courtesy Gunlaug Sortun in Norway. */
height: 1%;
overflow: hidden;
}
* html #pic ul {/*causes IE6 and 7 to behave on hover over the
hotspots, courtesy Gunlaug Sortun in Norway. */
overflow: visible;
}
#pic ul {
margin: 0;
padding: 0;
list-style: none;
}
#pic a {
position: absolute;
width: 250px;
height: 30px;
text-indent: -1000em;
}
#pic a:hover {
/*border: 3px solid #6585ab;*/
}
/* End of style sheet */
Thanks
Eric
__
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] Margin-top
Eric Lucile Eastman wrote:
Can anyone tell me why IE6 is positioning my text farther down the
page than Firefox?
http://www.samallman.com/consultingservices.html
Yes, it's one of the negative sides of having different 'hasLayout'
triggers for IE6 and IE7.
There are more than one 'hasLayout' trigger at play on that element,
which complicates things a bit since it means triggers can't be avoided.
The erratic expansion has to be prevented instead.
First, delete this rule entirely...
* html #pic ul {/*causes IE6 and 7 to behave on hover over
the hotspots, courtesy Gunlaug Sortun in Norway. */
overflow: visible;
}
Then change the regular ul styling to this...
#pic ul {
height: 0;
overflow: hidden;
}
...and IE6, and IE7, will render pretty identical to other browsers.
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/
[css-d] Centering header images in elastic layout and 100% width - scrollbars
I'm re-coding a web site for someone (not redesigning, not my design!) to be
in CSS - he wants the page to extend across no matter what size the browser.
OK, so I'm having 2 conundrums that I've not been able to find a solution
for:
In the header, I'd like to absolutely position the inspections by bob
title in the center, with the two other elements at left and right,
respectively. I thought to use the same technique as elsewhere (e.g. put
the image in a p tag and use margin: 0 auto; ) but this would mean
superimposing this over the entire header and this throws the other two
images off. I also tried putting the inspections by bob as a background
image, centered inside the main header tag but it still migrates to the
left. I've kludged it for now using margins but (a) it's going to look bad
in many browsers, (b) the entire thing breaks when the wndow is resized -
any way to keep the images set in a line even if the browser window goes
smaller? I
question 2! Why, if I define my body margins 0 and the page width to 100%,
do I have a horizontal scrollbar!?!
Anne
URL: http://www.language-works.com/InspectionsByBob/template.htm
CSS: http://www.language-works.com/InspectionsByBob/css/main.css
Code:
#header {
width: 100%;
height: 140px;
padding: 2px 10px 0 10px;
border-bottom: 2px solid #3D756C;
background-color:#FF;
clear:both;
}
#header #logoLeft {
width: 234px;
float:left;
text-align:center;
}
#header #logoRight {
width: 123px;
float:right;
margin: 0 20px 0 0;
}
#header #middle {
float: left;
margin: 0 10% 0 10%;
_margin: 0 8% 0 7%;
}
__
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] IE7 site check/issue?
A *Thank You* Bruno. Worked perfectly! ~Shelly __ 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] Centering header images in elastic layout and 100% width - scrollbars
Much more sensible, thank you. But a question: Why do I need to have
display:inline as well as float:left?
#header #logoLeft {
width: 234px;
float:left;
margin: -15px 0 0 10px;
display: inline;
}
#header #logoRight {
width: 123px;
float:right;
margin: -15px 20px 0 0;
display: inline;
}
Anne
- Original Message -
From: Gunlaug Sørtun [EMAIL PROTECTED]
May I suggest a simpler method - as a starting-point...
http://www.gunlaug.no/tos/alien/aes-3/test_07_1216.html
http://www.gunlaug.no/tos/alien/aes-3/test_07_1216_files/main.css
__
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] general css structure and positioning questions
thanks georg, see below
On Dec 16, 2007, at 3:46 AM, Gunlaug Sørtun wrote:
Ron Zisman wrote:
http://www.ricochet.org/ricotest/ricotest.html
problem. file validates as css and xhtml 1, but it's not picking up
the background image i've assigned to the #outerwrap.
The background-image is picked up, but #outerwrap looks and behaves
like
it's struck by collapsing margins[1]
Adding either...
#outerwrap {
float: left;
}
i moved the image to the body, as the outer wrap only extended as
deep as the last div, leaving the bottom of the screen blue.
it seems to work in the body...
question on size??? this is a whopping 600kp and is about 1800 px
wide and 1000 px deep. what are your thoughts on size? and
compression... i'm sure i can squeeze a little more... but what is a
sane size and weight? also, i have a blue background on the body, but
it doesn't extend beyond the image.as it shows as white.. what goes?
...or...
#outerwrap {
padding: 1px 0 0 0;
margin: -1px 0 0 0;
}
it did that. then i moved it to the body
...will reveal the background-image.
These fixes also reveal a weak spot in the styling of h2, in that
IE/win
has its own interpretation of 'margin:auto;' on these elements -
creating what looks like unwanted gaps in IE/win.
Change that to...
h2 {
margin: 0 auto;
}
applied.
...and IE/win will get back in line.
Declare specific top and bottom margins if you want any.
and about the navigation the intention is to have 2 of 3 columns
of sub-navigation--3 or 4 columns floated next to each other. no list
will have more than 4 entries.
but before that, why is my list (ul) being pushed to the bottom of
#navigation?
definitely open to a more intelligent approach
regards
Georg
thanks,
--ron
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
--
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/
__
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] Centering header images in elastic layout and 100% width - scrollbars
Anne E. Shroeder wrote: Much more sensible, thank you. But a question: Why do I need to have display:inline as well as float:left? Only to kill the 'margin-doubling on floats' bug in IE6. That fix makes as little sense as the IE6 bug, but it works without any negative side-effects. 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] general css structure and positioning questions
Ron Zisman wrote: i moved the image to the body, as the outer wrap only extended as deep as the last div, leaving the bottom of the screen blue. it seems to work in the body... question on size??? this is a whopping 600kp and is about 1800 px wide and 1000 px deep. what are your thoughts on size? and compression... i'm sure i can squeeze a little more... but what is a sane size and weight? also, i have a blue background on the body, but it doesn't extend beyond the image.as it shows as white.. what goes? Apply background to the html element, and experiment with transparent background(-color) further in. Having file-sizes over 100K for background-decoration, seems a bit too heavy, IMO. With so little of the background-image actually being visible in an average browser-window, I would look at ways for using much smaller (in file-size) repeated background-images, and make use of . Maybe one part on top on the #outerwrap, and one on bottom of html and/or body, might work. Available window-size will always be difficult to predict. For now it can go down to around 900px width, which is a bit on the large side, IMO. OTOH: it looks a bit strange if I open my browser-window to full screen-width - 3800px, so it's all about finding a balance that you're happy with. and about the navigation the intention is to have 2 of 3 columns of sub-navigation--3 or 4 columns floated next to each other. no list will have more than 4 entries. Just take into account that text may be subjected to resizing, and there shouldn't be any real problems. but before that, why is my list (ul) being pushed to the bottom of #navigation? Zero out some margins and paddings on top of the ul first, and trim to taste. Can't really see the need for that many containers surrounding nav, as an ul is usually good enough as container all on its own. At least #navcontainer can go. definitely open to a more intelligent approach Difficult to give more intelligent advices since I don't know all the details behind the visual design. Focus on getting the design to work for now, as it will reveal your ideas a lot better when all visual bits are in place. 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/
