Re: [css-d] Trouble with list/link in IE
Ric Jude Raftis wrote:
You will possibly find that this hack fixes the problem for IE. Place in
CSS file above the Navbar id.
/* Fix IE. Hide from IE Mac \*/
* html #navbar ul li { float: left; }
* html #navbar ul li a { height: 1%; }
/* End */
It is not necessary to float the lis, making a {height: 1%;} is enough.
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/
Re: [css-d] help! IE but not Firefox showing faux columns background
Gunlaug Sørtun wrote:
Then add this:
#contentcontainer {display: table;}
...which will make FF (and other good browsers) expand the container and
background properly.
regards
Georg
What's the reason for this method working?
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/
Re: [css-d] problem with background image
John Goodwyn wrote: I have a site that has an expandable left hand column by use of a repeating background image. However, the images extends the column past the footer and it shouldn't. Can someone look at my code and give me a clue as to how I can fix this? I've tried moving the copyright div out of the contentWrapper nest of divs, but that took away the bg image completely. Any thoughts? http://ver5.elliswyatt.com/borland/default.aspx?id=4 Drop the footer out of .contentwrapper. Put it immediately after closing .contentwrapper. 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/
Re: [css-d] Don't touch me! What is this (in FF!).
Daniel Doesburg wrote:
Hi list,
I've made a new setup for a website.
For the time being only in FF.
But even that browser has his problems.
Look (did I already said: only FF?) at this page.
http://wouda.doesburg.biz/fileadmin/template1.html
And that touch the borders of the window. Resize a little bit.
What is the mechanism behind that behavior?
I suspect it's the overuse of positioning. Without going too deep into
things, I did this, and rid the page of the problem, maybe :)
div#inhoud {
margin: 0;
padding: 1em;
width: 51em;
}
div#fotolaag {}
It is my sense that you should have compelling reason to remove an
element from flow. I saw none here.
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/
Re: [css-d] Don't touch me! What is this (in FF!).
Daniel Doesburg wrote:
Bob and Gary,
Thanks for your answer.
My problem was that on my PC the page in FF initially shows the pictures
full.
But if I tried to change the window size they where shown as you saw.
The height was that of the word Bodytext.
My question/problem/challenge is:
I want to show a layer of 4 (or 6) pictures behind the text on the
content part.
For maintenance reasons I can't use them as background.
Now I solved(?) it to position the content layer relative and the image
layer absolute inside the content layer. (I know, the word layer is not
correct but helps to explain)
What is your opinion about this?
What is the best construction.
1. div id=content position: relative
div id=pictures /div position: absolute
/div
2. div id=wrapper position: relative
div id=content /div position: relative/absolute
div id=pictures /div position: relative/absolute
/div
I think you're over-engineering things, Daniel. Try this;
#bglayer {
position: relative;
width: ?? /* appropriate to images */
height: ?? /* same thing */
padding-right: 20px; /* to allow for scrollbar if needed */
}
#textlayer {
position: absolute;
height: ?? /* same as above */
width: ??/* as above plus 20px for scrollbar */
top: 0;
left: 0;
overflow: auto; /* needed with padding if there is chance text will
exceed height */
}
=
div id=bglayer
img src=some.png alt= / !-- images are inline --
img src=some.png alt= /
img src=some.png alt= /
img src=some.png alt= /
div id=textlayer
pyour text/p
/div
/div
hth,
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/
Re: [css-d] Help with liquid layout
John Goodwyn wrote: I have a site that I'm building with a liquid layout format - http://ver5.elliswyatt.com/billue/default.aspx?id=2. In IE, it looks and functions exactly as it should but in Mozilla the left nav background image doesn't continue to flow with the content and the wrapping content shifts to the left instead of continuing as one column down the page. Can someone point me in the right direction on this? At http://www.alistapart.com/, search 'faux columns'. For a simple demo of the effect, see http://garyblue.port5.com/webdev/2col.html 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/
Re: [css-d] Help with liquid layout
Gunlaug Sørtun wrote:
Gary Turner wrote:
And .contentarea too, I think. No?
No need for that in that page :-)
Putting it on .content only did not extend the left column, which I
think the OP wanted ({height: 100%;}). Did I miss something in your
suggestion?
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/
Re: [css-d] Help with liquid layout
Gunlaug Sørtun wrote:
Gary Turner wrote:
Putting it on .content only did not extend the left column, which I
think the OP wanted ({height: 100%;}). Did I miss something in your
suggestion?
Don't know, but according to the original request: In IE, it looks and
functions exactly as it should... I just added what was necessary to
make the good browsers display the page as IE6 does. My Firefox, Safari,
iCab and Opera do just that.
OK, I see the bluish column extend to the footer in IE, so I think both
divs need the table value if he doesn't go the faux column route.
I'll admit to having given up on the table group of display values due
to IE's non-support. I need to re-investigate. That's a novel, to me,
use. But, I'm probably behind the curve.
John's got a variety of solutions to pick from. :)
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/
Re: [css-d] Three-column layout
Jonathan Berry wrote: I just wanted to be pointed to any tutorials on doing a three (or other number for that matter) column layout without absolute positioning or floats. Any directions? Thanks in advance. I don't know that there is a way to have multiple columns using your restrictions, due to the current state of certain browsers' css2 compliance. I've played with some things, http://garyblue.port5.com/webdev/3col-modern.html, but it doesn't work in IE. Do you have compelling reason not to use floats or absolute positioning? 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/
Re: [css-d] Keeping headings visible
Ian Skinner wrote: I have this fairly large table that, unless one has their monitor set to above average resolutions (such as mine at 1280x1024), one can not see the entire table at once. And since it is long both horizontally and vertically one gets the dreaded double scroll bars at lower resolutions. Is there any reasonably way to keep the column and row headers visible while the data cells scroll up, down, left, right and all around? You may set the height for tbody and make overflow auto. This will let the body scroll while header and footer stay in place. Unfortunately, IE and Opera(7.54) do not support this. See my demo at http://garyblue.port5.com/webdev/scrollingtable.html for my work-around with a nested table. An interesting side note, this seems to be one of the few instances of IE6 (in compliance mode) following the standards better then Firefox. IE is honoring my specified column widths, even though that means some of the heading cells' content does not fit. Firefox stretches those cells. I would have expected the reverse. From http://www.w3.org/TR/CSS21/tables.html#q4,'width' The 'width' property gives the minimum width for the column. This would suggest to me that Firefox is doing it correctly. 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/
Re: [css-d] clear:float is causing layout problem
Matt Tibbits wrote:
This problem only happens in Firefox. It seems to work fine in Explorer.
Basically, I have a 2 column layout with the left column being a float.
In the right column, I am using floats on various elements, such as images.
If I don't do a clear:both after my images, everything gets messy in
explorer.
When I do the clear:both everything after the clearing element gets dropped
down below the bottom of the left menu.
You can see this in action here:
http://www.nbeastersealmarchofdimes.ca/esmod.new/forms.php
Give this a try:
ul.formpage li {
float: left;
width: 51%;
_width: 100%;
}
#content ul.formpage br {}
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/
Re: RES: [css-d] Floating IE problem
Gustavo Caetano wrote: Can anyone please help me in that one? I can't figure out how to put it working in IE. Hello Thanks to some guys here I've made some progress here. Almost there www.cacofonia.com.br/07 Now just need to make the green box relative positioned. Any tips? Hi Gustavo, I'd like to try, but I'm getting a 404 error. 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/
Re: [css-d] column wont move to left
Erland Flaten wrote:
I want the first column - the one at left with the navigation buttons
- to start at det very beginning of the left side of the browser.
Cant manage that to happen. The CSS is from one of Douglas
Livingstones fine ones. I dont understand this column model very well
but still I use them and try to learn some. I hav a feeling that this
is good model :)
thanks for any help.
http://www.kariutgaard.no/
and the stylesheet
http://www.kariutgaard.no/3sp_likhoyde.css
#navlist is abutting the left edge. It's the ul itself that has left margin.
#navlist ul {
padding: 0;
list-style-type: none;
font-size: 0.9em;
margin: 0em 1em; ---
}
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/
Re: [css-d] trouble with extra width in IE PC
Bruce Gilbert wrote:
Hello,
I still haven't been able to come up with a solution to my problem
with my div's not lining up in IE (PC). The URL in question is
http://www.inspired-evolution.com/Contact.php, and the CSS is
http://www.inspired-evolution.com/Gilbert.css.
I tried adding display:inline to the divs that make up the page, but
that messes things up in the good browsers. Any suggestions for me?
This isn't a float issue, because I have nothing floated.
Not tested.
Look at this;
#breadcrumbs{/*sets positioning and font-size for breadcrumbs*/
padding-left:4em; --- 4 ems added to
padding-top:.5em;
padding-bottom:.5em;
width:100%;--- 100% width
font-size:.95em;
font-weight:bold;
color:#ccc;
font-family:verdana, arial, sans-serif;
}
The 100% + 4em causes #breadcrumbs's parent container to expand to enclose it.
IE's like that, helpful. :( There is not need for a width value anyway, so lose
it. That should solve your problem unless there are other similar instances.
Usually, there is no need to state width. A block element defaults to available
width, while inline elements should ignore the property.
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/
Re: [css-d] Div's not displaying in Firefox but ok in IE
Asiapreneur wrote:
Hello,
For some reason this page displays correctly in IE6 however, the main
content of the page doesn't display in Firefox (1.0.4). The header and
footer divs display correctly.
The page in question is:
www.ethanhathaway.com/index-fc2.php
I've validated the html and css files and they turn out ok. I've also
ran a search in the archives for this problem but couldnt' find
anything related.
Not sure what I've done wrong here. Any help would be great!
Remove {z-index: -1;} from .mainright, -left, and -center.
The use of AP elements makes for a fragile layout and it destroys the footer
thingie as there is effectively no content to push the footer down when needed.
You may want to reconsider your approach.
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/
Re: [css-d] IE border
Luc wrote: Good evening list, http://www.dzinelabs.com/Pages/template_metallica.php Op, Moz FF show the wrapper right border. IE does not. Can somebody shed some light on this? 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/
Re: [css-d] IE border -- apologies
Luc wrote: Good evening list, I inadverdantly replied on this thread in answer to another. My apologies. 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/
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/
Re: [css-d] IE pulling my text out of the container...
Sean Montgomery wrote: Hi all, Sorry if the subject was not descriptive enough as I Have no idea what to call the bug. I am having a problem with IE, of course, and I can not seem to figure out why. I have narrowed my code down to a bare minimum to rule out errors I may have caused. I have validated the code. You can see the result here: http://gnomemonastery.com/my_files/bug.html The code will be at the end of this email. The problem is that for each block (.leftBlock) IE is pulling the text over a little to the left. So that by the end my text is way out of it container. I spent several hours trying to find a something online that would have explained it but to no avail. The problem is caused by 1 of 3 things because when I remove any of thsoe three things the problem goes away.snip Big John has documented this bug. You may see the write-up at http://www.positioniseverything.net/explorer/creep.html 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/
Re: [css-d] need help with abs.pos in IE6
David Cortesi wrote:
Gary,
thanks very much for taking time to work on my problem.
You're welcome.
you propose two fixes, one to use the Holly Hack which I have yet to
test (will get to my IE6 system late this afternoon) but the first, more
radical, is to use float:right instead of position:absolute.
This looked like a great solution at first, your test code displayed
great. Then I tried to adapt it to my own application and I found a
surprising snag. You had put the floated page-number span first on the
line in each list item,
span3/spanLine One
I thought, huh? I'm advising people who are converting scanned books
into etexts for Project Gutenberg, and they get ASCII files with lines like
Line One3
in them, and convert it using regular expression search/replace, and it
would be POSSIBLE to put the line number first in that case but hardly
intuitive. So I reversed the order for my test:
Line Onespan3/span
which looked fine in the first 2 browsers I tried, Safari and Opera,
then I tried it in Firefox and it failed, all the floated numbers
dropped below their parent lines and looked terrible! Same story in
Netscape 7 and Camino. Huh?
Turns out when floating a span inside a list item (or para?) it is
essential to put the floated element first, before the text it floats
beside -- you apparently knew that. What a bizarre world.
Yeah, that's just How Things Work. You could simply float the text
instead of the page nr.
#v1 {
text-align: right;
}
#v1 span {
float: left;
width: 90%;
text-align: left;
}
-
div class=toc
id=v1
ul
lispanFirst line/spana href=#3/a/li
li
spanSecond line/span27
ul
lispanLine two-A/span28/li
lispanLine two-B/span32/li
/ul
/li
lispanThird line/span49/li
/ul
/div!-- end v1 --
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/
Re: [css-d] [REPOST] Vertical alignment problem in earlier versions of Mac IE
Arno @ Raketnet wrote:
I posted this earlier, but I haven't got a response to it. Maybe someone
can still advise me on this?
The page http://portfolio.poetryin-e-motion.com is supposed to be
centered on the page. snip
The single celled table works very well. With only one cell, there is
little incremental markup weight, and no accessibility penalty. An
example may be seen at http://garyblue.port5.com/webdev/vcenter.html.
It would be a simple matter were that certain 800lb. gorilla among
browsers more conformant to css2. div {display: table-cell;
vertical-align: middle;} would do the job then.
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/
