Re: [css-d] page check in IE7 please
Luc, On Jun 19, 2007, at 9:42 AM, Luc wrote: Good morning James, It was foretold that on 19/6/2007 @ 09:16:57 GMT-0400 (which was 10:16:57 where I live) James Gadrow would write: Only problem I see is that the last letter in your header is overlapping your right hand image. Is that some IE7 bug i'm not aware of? Or just setting the heading class with a font-size of 2 em will do the trick? At larger text sizes, the header overflows its bounds and overlaps the right hand image. It happens in firefox also if you bump up the text size a couple of notches and have the window width small enough so the min-width kicks in (which I always do). This design assumes users will browse at full screen and have large monitors, and neither is true in my case. I only ever see the leftmost inch of the right hand image unless I make a point to scroll horizontally. Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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/
Re: [css-d] page check in IE7 please
Luc, On Jun 19, 2007, at 11:37 AM, Luc wrote: Good afternoon Roger, It was foretold that on 19/6/2007 @ 10:14:22 GMT-0400 (which was 11:14:22 where I live) Roger Roelofs would write: snipped a bit This design assumes users will browse at full screen and have large monitors, and neither is true in my case. I only ever see the leftmost inch of the right hand image unless I make a point to scroll horizontally. Hmm i see. My initially thought was to have it displayed properly at 800x600. But, if i understand you correctly, the way it is now that resolution doesn't display the layout properly? The layout currently has a min-width of 1400px. It displays as you intended, but I have to scroll about 500px to the right in order to see that side. One of the beauties of allowing floats to drop is that the content is conveniently viewable at more screen/window sizes, but that means you have to give up a certain amount of control. Sometimes it is easier to make the user scroll than it is to convince the customer that 'it is supposed to do that' :-). Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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/
Re: [css-d] Click on thumbnail to show larger image on the side
On Jun 13, 2007, at 3:48 AM, ochieng' nelson wrote: I should like to create a gallery show where you click on the thumbnail to show larger image on the side, using css. My page is: gilroy.50webs.com/accommodationpage.html Thanks for the url. You will need javascript to accomplish that task. I've been enjoying the jQuery javascript library lately http://jquery.com/. It makes this kind of thing very easy. Theoretically, css controls how the page looks, and javascript controls how the page behaves. The :hover pseudo-class kind of breaks that paradigm, but it's _so_ handy. Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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/
Re: [css-d] Firefox and Opera bug
Trevor,
On Jun 10, 2007, at 3:49 PM, trevor bayliss wrote:
Hi all, the .gw_aTab is not showing the same in size as in IE (the
gain Gain a unique insight into your industry part with the border
around it and the uk image). http://216.219.94.105/index1.cfm
The div .gw_aTab is not showing right in Opera and Firefox. In IE
it is perfect
You are banking on an ie bug to get the look you want. IE will
(incorrectly but conveniently) auto-expand blocks to contain floated
content. All the other major browsers will not. See this article
for an explanation of how floats/clears work. http://
www.complexspiral.com/publications/containing-floats/
Also, you have some tags in uppercase and some in lowercase, some
attributes are quoted and some are not. This will not necessarily
prevent your page form displaying correctly, but it will make it
harder for you to debug. Consistency in code is your friend.
You can save yourself a fair amount of hair pulling by designing in a
more standards compliant browser, like firefox, Opera or Konq/Safari
and dealing with ie bugs after your design has solidified.
The expedient solution is
.gw_aTab {min-height: 190px;}
--
Roger Roelofs
__
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/
Re: [css-d] Clearing absolutely positioned elements
Shelly, On Jun 9, 2007, at 1:54 PM, Shelly wrote: I know I don't contribute a lot to this list (kind of hard to offer advice when you're in the ranks that some of you all are in - I sometimes feel like a Private standing in front of Patton, if you know what I mean) - but I found something I thought was interesting. I know how you feel. I felt the same way a few years ago and Zoe had to push me to participate on-list. I was having an issue with an experiment someone laid on the the other day, and I was - for a short time - looking for a way to clear an absolutely positioned div in the same way you could clear a float. I was pretty sure it couldn't be done (in fact, in my search, I found a response from Ingo to a thread written a little over a year ago that specified no to this exact question - which sort of made it a definite for me). However, I *did* find this: http://www.shauninman.com/assets/examples/si-clear-absolutes-1.6/ nested.html Ingo is still right. This page is just absolutely positioning everything and using overflow hidden to keep things from overlapping. But that means text is lost/hidden if it can't fit (try increasing your tet size to see what I mean). It may look like clearing, but it isn't. -- Roger Roelofs __ 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/
Re: [css-d] unwanted padding-top padding-bottom
Joanne,
On Jun 8, 2007, at 7:56 AM, David Laakso wrote:
Joanne wrote:
p {
font-size: 100%;
margin-top:0;margin-bottom:0; --- kill the top and bottom margin
font-family: Verdana, Helvetica, Arial, sans-serif;}
---
Like the last suggestion, this is going to remove the margins from my
paragraphs. I don't want to remove the margins from my paragraphs.
I want to
remove the large white gap on the top bottom of the #content
div. I still
need the paragraphs to look like paragraphs inside the #content
div. When I
have a h1 as the first thing in my #content div, there's no gap
at the
top.
Is there so simple solution to this? If not, I'll have to change
the layout
to suit.
Joanne
There probably is a simple solution, and I am blocking on it. Perhaps
someone else can assist.
You want to keep the paragraphs margins from escaping their container
div. To do that you must prevent them from 'touching' the div
margins. Interposing a tiny bit of padding (or border) can do that.
#content { padding-top: 1px; padding-bottom: 1px; }
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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/
Re: [css-d] My list looks crap. Will altering display help?
Chris,
On May 31, 2007, at 12:09 PM, Christopher Blake wrote:
http://www.3pointdesign.com/home/links.html
http://www.3pointdesign.com/styles/one.css (This is turning into a
massive page so where you need to look is just below half way) or..
at the end of email in red.
What i would like to do is have any second lines of describing text
start after the link / below where the first line starts.
You can get sort of what you want with the following...
.container h2 { clear: left; }
.arrowlinks p{
width: 70%;
margin-top: 0;
padding-left: 10px;
float: left;
}
.arrowlinks a{
width: 22%;
margin: 0;
padding: 0;
padding-left: 18px;
float: left;
clear: left;
font-size:12px;
background: url(../images/small-blue-arrow.gif) no-repeat;
}
--
Roger Roelofs
__
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/
Re: [css-d] Adding bg images to list items
Jon,
On May 30, 2007, at 10:59 AM, Jon Hughes wrote:
That doesn't seem to work.
#affils li {
padding-top:50px;
background:#339966;
}
When I do this, the background color is only behind the text, and not
above it. (and when I use a bg image, it is only behind the text as
well)
I'm sorry for being incomplete. You will also have to use the
background-position rule to put the image where you want it.
Is there any way to see this page, or a mockup? I have a feeling
something else is going on, but I'm not sure what it might be.
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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/
Re: [css-d] Adding bg images to list items
Jon,
On May 29, 2007, at 7:21 PM, Jon Hughes wrote:
I have the following code:
div id=affils
ul
li class=affaAffil A/li
li class=affbAffil B/li
li class=affcAffil C/li
li class=affdAffil D/li
/ul
/div
I want an image to appear above these in an inline list, but I can't
seem to modify the height of the li's, even when I make them
display:block (my guess is that it's overridden with the
display:inline)
Basically, I want it to look like this:
Affa Image-Affb Image--Affc Image--Affd Image
-Affil AAffil B-Affil C-Affil D--
You can use padding on inline elements to get the spacing you need.
Something like
.affils li { padding-top: 35px }
firebug ( for firefox as you would guess ) is great for seeing where
rules override one another.
--
Roger Roelofs
__
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/
Re: [css-d] Different ways of doing the same thing
Les,
On May 25, 2007, at 11:30 AM, Les Mizzell wrote:
It's always interesting to look at other folks stuff. I just
inherited a
site, and in looking at their CSS, the main div is listed thusly:
#pageWrapper {
width:760px;
position:absolute;
left:50%;
margin-left:-380px; }
Where I would have just done:
#pageWrapper {
width:760px;
margin: 0 auto 0 auto; }
Any advantage of doing it the first way?
There is a major drawback to the first way. If the user's window is
less than 760px wide, content will flow off the left edge of the
window and become inaccessible. It the page has to be in quirks
mode, or you need to support ie5/win, you can get the same result with
body { text-align: center; }
#pageWrapper {
width: 760px;
margin: 0 auto;
text-align: left;
}
--
Roger Roelofs
__
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/
Re: [css-d] Backgound highlight for wrapped text
Anthony, On May 19, 2007, at 2:16 PM, Anthony Park | 29degrees wrote: Before I resign myself to it not being possible with CSS, I thought I'd put a little problem to the great minds on this list. If you take a look at: http://demo.29degrees.co.uk/highlight/ ... you will see what I am trying to achieve. The first example looks slightly cramped and would benefit from padding at the beginning and end of each wrapped line, to provide a little spacing between the text and the edge of the red area, as in the second example. The first-line pseudo-element is kind of what you want, but there aren't other pseudo-elements for the other lines. The only solution I've come up with is an ugly javascript hack to wrap each line in a span, but my code is only a proof of concept. Getting it to play nice with window and font resizing would be a nightmare. -- Roger Roelofs __ 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/
Re: [css-d] Two images side by side
Tedd, On May 20, 2007, at 8:11 AM, tedd wrote: At 12:08 AM -0400 5/20/07, jana coyle wrote: I have two images that I would like positoned side by side. I have setup a mouseover effect on image#1. After setting up this effect the images are now lined up one ontop of the other. How can I position the images side by side and still keep the effect on image#1. Here is a link to my code. http://www.precisemessenger.com/private/help2.html It might not be popular on this list, but I don't see anything wrong with using a simple table for this. Anyone care to object and say why he shouldn't? I object! :-) First, I don't think it will do what the original poster was after, tho I could be wrong because the current layout confused me. Currently the two images are one over the other and a table would make the hover effect kind of strange. Second, tables are great for tabular data, but I'm not sure two unlabeled pics qualify. If they had headers and other data to go with, then you'd get no argument from me. My (very unscientific) test for whether something is tabular data is to imagine the content pasted into a spreadsheet. If it feels out of place, if you can imagine sending it to another technically competent person and hearing them say 'Why did you do this in Excel', then it doesn't qualify as tabular data. Third, using markup that fits the content makes future maintenance easier. I can't begin to tell you the number of times I've had to alter code I wrote a year or two ago and have spent more time figuring out what the original code was doing than actually enhancing the page. Yes, I confess to being a clean html freak. -- Roger Roelofs __ 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/
Re: [css-d] horizontal menu quirk
Jack,
On May 17, 2007, at 11:25 AM, Jack Albright wrote:
I've made a typical horizontal menu using ul and li elements and
find that the individual menu items have about a 3-pixel gap between
one another unless I take out line feeds from the source code. This
is very curious.
If the source code looks like this, I get a gap between each menu tab
div id=navcontainer
ul id=navlist
li class=firsta href=/?nextPage=clientsid=?=
$clientsMenuID?Clients/a/li
8 ---
Here is the css:
-- 8 ---
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
Inline elements are supposed to take space in the source code into
account, unlike block elements. If you want to keep the li as inline
you will have to remove the spaces/linefeeds in the markup.
Otherwise you could float them, but ie6/win will still give you
fits. You can get slightly less mangled source but still remove the
spaces by writing it something like this
ul id=navlist
li class=firsta href=/?nextPage=clients id=c1Clients/
a/li
li class=firsta href=/?nextPage=contractors
id=c2Contractors/a/li
/ul
--
Roger Roelofs
__
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/
Re: [css-d] Extra vertical space
Gary,
On May 5, 2007, at 2:05 PM, Gary Benson wrote:
Ok, so I'm trying to make a box with rounded corners by using
images for the top and bottom edges, but I'm getting big gaps
between the images and the div they surround. Check out
http://www.relaxshiatsu.co.uk/ to see what I mean. The HTML
looks like this:
div id=contentHead/div
div id=content
!-- stuff goes here --
/div
div id=contentFoot/div
The top and bottom divs are where the images are (in CSS).
Weirdly, the space is only present if I have block-level markup
like p in the content div -- the space disappears if I just
have this:
div id=contentHead/div
div id=content
blah blah blah
/div
div id=contentFoot/div
It's as though the p's margin has extended beyond the div
it's in. But that doesn't happen, right?
Sure it does. See these articles (and the wiki) about collapsing
margins. http://www.456bereastreet.com/archive/200408/
css_autoheight_and_margincollapsing/ and http://
www.complexspiral.com/publications/uncollapsing-margins/
Your h1 and p elements have default margins applied. The div they
live in has none. Since the div has no border/padding to keep the
margins from 'touching', the h1 and p margins become the margins for
the div. You can stop this effect by adding 1px padding or border to
the div.
#content {
padding: 1px 10px;
}
hth
--
Roger Roelofs
__
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/
Re: [css-d] Span tags set to not display make containing div not display
Dave,
On Apr 24, 2007, at 2:33 AM, Dave M G wrote:
I hadn't accurately described my code. My code actually looks like
this:
div id=test
spanI don't want this seen/span
ul
lispana list thing/span/li
/ul
/div
So the CSS seems to have been going from the initial span all the
way through to the /span in the last li tag. Knowing this, I
can control the problem.
I see you have already gotten a good reply from Jukka. Let me add
another option.
Given your current html, you could use css like this
#test span { /* all spans inside #test */
display: none
}
#test ul span { /* all spans inside #test ul: reset the default */
display: inline;
}
Since the second rule has a higher specificity, it will override the
first rule.
--
Roger Roelofs
__
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/
Re: [css-d] Span tags set to not display make containing div not display
Dave,
On Apr 23, 2007, at 2:47 AM, Dave M G wrote:
CSS-d,
I have a div, ul, and span tags set up like this:
div id=test
spanI don't want this seen/span
ul
lia list thing/li
/ul
/div
My CSS declares:
#test span {
display: none
}
What I want is for the ul list to show, but not the text inside the
span tags.
But instead what happens is that everything inside the div does not
display.
Shouldn't the CSS apply to within the span tag, and leave the ul
tag, which comes after the closing /span, alone?
Yes. I'm betting something else is wrong. Can you give us a url so
we can help debug?
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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/
Re: [css-d] Scrollbar In Firefox adjusting layout.
John, On Apr 5, 2007, at 5:33 PM, Johnny G's wrote: Is there a way to have no scrollbar when not needed yet the layout not be adjusted when Firefox adds one? Only if you are willing to use a layout that is left aligned. Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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/
Re: [css-d] AltText using CSS ?
Kevin, On Mar 10, 2007, at 6:24 AM, Kevin J Pledger wrote: On this page here http://www.jdstiles.com/java/alttxt/alttxt.html , you are able to have flyout boxes containing text when you mouseover a word etc. I know the layout is .navtext using CSS, but the actual control is using JS. My question can the same type effect be done solely with CSS, if so can I please be pointed in the right direction for some examples / tutorials etc. If you just want tooltips, you can use the title attribute on any html element. The alt attribute was not designed for this task even though ie insists on using it this way. If you need big boxes like the example page shows, a sample css solution can be found at http:// meyerweb.com/eric/css/edge/popups/demo2.html and http:// www.tjkdesign.com/articles/css%20pop%20ups/default.asp The major drawback to css popups is that to be compatible with ie6 and lower, you must use an [a] element as the container, which means you can only put inline elements inside of the popup such as spans and images. If your popup needs a heading and a paragraph of text, you can make it look the way you want using spans, but people without css will see it as a part of the link text, all run together. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Wierd IE 6 position: relative with ghosting
Ingo, On Mar 9, 2007, at 3:49 AM, Ingo Chao wrote: Subscriptions wrote: ... the ghosts make the page longer than it needs to be, creating visual issues. Would you mind looking at it? http://www.buckeyeinstitute.org/ podcast/ I'd like to know if Safari and Opera are right to show the space that is occupied by the r.p. box before it is offset. Os is Fx right, not making the page longer? The spec says When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. http://www.w3.org/TR/CSS21/visuren.html#choose-position However, I can't answer your question because I couldn't see any difference between Safari/Webkit and ff2. My (possibly flawed) understanding of the spec is that the browser should show the space that would have been occupied by the r.p. box and show the content of the box offset as appropriate. The browser should not shift following content due to the offset unless clearing floats would dictate otherwise. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Safari not loading stylesheet?
Bill, On Feb 12, 2007, at 4:07 PM, bill scheider wrote: The non-called stylesheet is mainleft.css and appears on http://syntonicmicrowave.com/products.html (among others). This is happeneing only on Safari There are currently 22 errors in that css file. Fix them and Safari will likely be fine. Safari is more likely than other browsers to drop a bad css file than try to work around it (which I prefer). It would be nice if Safari made debugging easier tho... -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] mac/ie5.2 issue
David,
On Jan 30, 2007, at 10:30 PM, ~davidLaakso wrote:
At screen resolution 800, mac/ie5.2 is doing a number on #hnav (the
horizontal bar immediately below the #header).
Mac/Opera9 gets it right.
What to do?
browsercam captures: http://www.browsercam.com/public.aspx?
proj_id=319499
uri: http://www.chelseacreekstudio.com/
css directory: http://www.chelseacreekstudio.com/ca/site/styles/
Nice work as usual.
IE/Mac seems to be having difficulty fitting the #right elment, so at
certain widths it drops out of view. Changing the css to
#hnav #right { float: left; width: 29%; margin-left: -30%; }
Made it work down below 600px width, and much less 'twitchy'. This
didn't seem to bother ff2, but I didn't do any other browser checks :-).
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] ie7 not centered; mozilla netscape don't show vertical border
Melinda, On Jan 27, 2007, at 7:29 PM, Melinda Odom wrote: This site, http://72.9.236.169/index.php is suppose to have a faint left line in the left column as seen in IE7. In netscape and mozilla this border will not show but if I put a background color on the whole right side then it shows in all browsers. First i would suggest validating the html. There is a missing tr on line 37 and I think one of the tables is closed in the wrong place. This will cause no end of rendering difficulties. Also, even though I have auto values set in the container style below netscape and mozilla will center the table in the browser but IE7 will not. I believe ie will render your layout in 'quirks' mode because you have an incomplete doctype. In standards mode the margin; auto; centering technique will work in ie, but in quirks mode you have to use text-align instead. In short, if you fix the html and the doctype, styling will be more consistent. Also, you could achieve this layout with _many_ fewer tables. In fact, this page doesn't need any. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Layout flow-error
Pelle, On Jan 19, 2007, at 12:00 PM, Stib AB wrote: Possible som e easy thing for you pros to check. Why is my page not inherited in the framework? http://beta.altaria.se/default.aspx?ID=100963 I'm not exactly sure what you mean. I'm guessing you are talking about how the text ov the page flows over the bottom border image. If so, the content of .ThePageInnerWrapper is overflowing the height you specifies because the content can't all fit. If you want to force it inside, you will have to set overflow: auto; which will show a scroll bar if necessary. If you want the bottom border to move to after the text, you will have to attach it a different way. If I guessed wrong, try again. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Content Overflow in Firefox 1.5.0.9
Terri, On Jan 17, 2007, at 12:42 PM, Terri Hodgson wrote: I'm working on making a real estate website Firefox compatible and am stuck on a few issues. The first one is this: The template that holds the listings details for each new listing is all fine except for the overflowing content. If you look at it in IE it's fine. In Firefox the details of the listing overflow onto the content below it. Here is the link: http://www.thehomehunter.ca/detail/2006detail/1517marshall- W1019354.htm Here are the styles links: Internal Styles: http://www.thehomehunter.ca/ho_internal.css Global Styles: http://www.thehomehunter.ca/ho_global.css Listings Styles: http://www.thehomehunter.ca/ho_list.css I guess it must have something to do with the combination of divs and tables but I've tried several fixes with no luck. Any feedback is appreciated. The problem is likely setting a height on the listing. If you avoid setting heights on textual elements, the page will flow just fine. If you want to set a min-height to take up extra space on short listings, you will need to conditionally send min-height to good browsers and height to ie6 and 5. Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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/
Re: [css-d] Another cleanup tip needed
Kimi, On Jan 17, 2007, at 4:50 PM, Kim Brooks Wei wrote: http://www.thewei.com/sandbox/uajx/about.php However, I still cannot get my three content boxes to line up with each other along a horizontal line. In fact, in several browsers including FF and Safari on OSX the center content box shoots right up into the header area. I tried separating the header from the rest of the content using clear: both but this didn't appear to accomplish anything. The center content box belongs to the flow which starts with the header. How can I get browsers to recognize that each the header and center content areas are distinct, although they are connected? The right and left columns are less problematic and render as expected in most browsers. The #bannerbox has a height defined of 94px. The banner is an 88px tall img + 10px padding + 1px border + room for the descenders since images are display: inline; by default. That means the headerbox needs to be about 104px in height to contain the banner. Since bannerbox's height is restricted, banner overflows out the bottom which makes it look visually taller than it really is. If you want to see what I mean, try adding a 1px border to #bannerbox. The solutions are to either remove the height from #bannerbox, and set enough bottom margin to push centercontent down where you want it, or set a large enough height to force centercontent down where you want it. I typically use floats for layout because they adapt well to changes in text and window size from one browser to another. Unfortunately you have to add ie/win specific instructions to get around its flawed float rendering. hth -- Roger Roelofs Datacomp Appraisal Services -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Clear: both Problem?
Richard,
On Jan 17, 2007, at 2:31 AM, Richard Brown wrote:
Site is:
http://www.nanadobbie.com/
CSS is:
http://www.nanadobbie.com/includes/templates/nanadobbie/css/
stylesheet.css
In the meantime I have created icons for the navigation but am still
experiencing problems getting the icons to centre. I am using float:
right to ensure the boxes line up correctly but this also has the
problem of reversing the order of the boxes. So instead of 1, 2, 3, 4,
5 we get 5, 4, 3, 2, 1. Is it possible to achieve the effect without
floating please?
It you keep the floating, you could do something like this...
#navicon {
float: left;
background-color: #fff;
padding-left: 30px;
}
.box {
margin: 1px 13px;
font-size: 85%;
font-weight: 600;
float: left;
width: 100px;
text-align: center;
background-color: #FBFBF1;
}
I don't think there is a robust way to do it without floating.
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] Bottom 3 divs are displaced in Firefox 1.5
Terri,
On Jan 17, 2007, at 3:32 PM, Terri Hodgson wrote:
Thanks to Roger and Tim for help with the last issue; that problem
is solved.
The next item I have with this website is the home page.
There are 3 divs under the main content. Each one holds a featured
item of some sort.
They are to be displayed side by side, which works well in IE 6.
In Firefox 1.5 they do not line up at all.
All 3 are within a div called 'hotboxcontainer'.
The Home page is here:
http://www.thehomehunter.ca/index.htm
First, you need better markup. The html has 32 validation errors,
some of them serious. For the particular spot that is giving you
fits, try this.
div id=hotBoxContainer
div
h4Buying? Selling? /h4
div class=body
h5Thinking of Buying?/h5
pSign up for a href=forms/frm_emailRequest.htmFree VIP
listings/a email notification./p
h5Thinking of Selling?/h5
pa href=forms/frm_homeEval.htmClick here/a for a Free
Evaluation of your Home's Worth/p
/div
/div
div
h4Feature/h4
div class=body
pa href=milton_listings.htmimg src=listings/
1517marshall-W1019354/1517marshall-feature.jpg alt=The Home
Hunter's Featured Listing//a/p
pa href=milton_listings.htmSpotless Sutton Hills loaded
with upgrades .../a/p
/div
/div
div
h4Area Listings/h4
div class=body
pa href=http://www.mls.ca/map.aspx?AreaID=928;
target=_blankimg src=images/home/area_listings.jpg alt=View
Milton and Area real Estate Listings //a/p
pView all area listings that suit your buying needs a
href=http://www.mls.ca/map.aspx?AreaID=928; target=_blankSearch
here /a/p
/div
/div
/div
and css like this...
#hotBoxContainer {
background-color: #E7E7E7;
width: 470px;
height: 175px;
padding-top: 10px;
padding-bottom: 19px;
padding-left: 8px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
font-size: .9em;
}
#hotBoxContainer div {
float: left;
width: 154px;
text-align: center;
}
#hotBoxContainer h4 {
margin: 0;
padding-top: .5em;
background: url(images/home/hot_box_header.gif) top center no-repeat;
color: white;
text-align: center;
vertical-align: bottom;
line-height: 1.5;
}
#hotBoxContainer h5 {
margin: 0;
font-size: .9em;
}
#hotBoxContainer p {
margin: 0 0 .25em 0;
font-size: .8em;
}
#hotBoxContainer div.body {
float: none;
width: auto;
margin: 0 5px;
padding-top: 10px;
background-color: white;
border: 1px solid black;
border-top: none;
height: 150px;
}
#hotBoxContainer a img { border: 0 none;}
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] ie spacing on list
Lic,
On Jan 4, 2007, at 5:59 PM, Liz wrote:
Is there a way to do the following with
http://www.liztestsitem.com/nav/index.html
1) have the space between the list items be the same in IE as it is
in FF
and Safari.
2) the arrow is a background image. I have to keep changing the
canvas size
of the arrow image so the arrow lines up where I want it to when I
change
the size of the list font. Is there a better way of doing this? I
tried
using an arrow as the list bullet but it didn’t show up when I also
had the
border for the line.
for 2), using background-position: center left; will keep the
background image centered inside the a element. As for 1), I can't
test on ie, but I'd start by zeroing out the margin and padding for
both the ul and li in question.
I ended up with something like this (all other styles left alone).
Trimming out the extra background on the arrow will require some
tweaking of the css, but it will be simpler in the end.
#navcontainer li {
margin: 6px 0;
border-bottom: 1px solid #3f61a2;
padding: 0 0 5px 0;
}
#navcontainer li a {
display: block;
padding: 5px 14px 0 24px;
background-image: url(/images/arrowLn.gif);
background-repeat: no-repeat;
background-position: center left;
}
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] list
Marjo, On Dec 28, 2006, at 3:58 PM, Marjo wrote: I am new to this list, having just started my webdesign activities again. Welcome. I hope you enjoy the list as much as I have. On a webpage I want to have a piece of text with in between a few lists. Now, with my current design and stylesheet make-up, I have the lists with items floating between the text. I'm not sure I understand the question. However, I have a few general suggestions. The first step should be to write valid markup. The page is missing some starting and ending tags. When browsers have to guess at where elements start and end, they each do it differently. This causes a lot of frustration for you. Second, the link to the stylesheet is incorrect, so we are seeing the page without any style applied. When I fix the link element I see that the paragraphs and lists are overlapping. This is caused by setting the height on the p element. Remove that and the overlap will stop. Third, validate the css also. You have some font names that need to be in quotes (because they have spaces in their name). While you are there, try setting your font-sizes in percent or ems. That way readers with low vision can easily increase the text size of your site so they can more comfortably read it. I cleaned up/validated the html and got something like this. - html !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; html xmlns=http://www.w3.org/1999/xhtml; lang=du xml:lang=du head meta name=generator content=HTML Tidy for Mac OS X (vers 1st December 2004), see www.w3.org / titleChantal van Cappelleveen Zorgadvies/title meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta name=keywords content=Chantal van Cappelleveen Zorgadvies, pgb, zorg / meta name=description content=Website van Chantal van Cappelleveen Zorgadvies / meta name=author content=Chantal van Cappelleveen / link rel=stylesheet type=text/css href=index.css / /head body h3Over mijhellip;hellip;/h3 pVan 1997 t/m 2001 heb ik de opleiding HBO MWD gevolgd, in juni 2001 ben ik afgestudeerd.br / Mijn stage heb ik gevolgd bij Stichting MEE regio Tiel. Vanaf 2000 t/m januari 2006 heb ik gewerkt bij Stichting MEE Zuid Holland Zuid. Mijn voornaamste werkzaamheden waren: cliënt- en gezinsondersteuning, hulpvraagverduidelijking, casemanager, ondersteuning bij indicatieaanvragen en bemiddeling naar zorg. Overige taken waren :/p ul id=nav liAandachtsfunctionaris AWBZ indicatiestelling (PGB)./li liProfileringswerkzaamheden Stichting MEE, invoering WMO./li liParticipatie in projectgroep ëGewoon Meedoení. Samenwerking tussen diverse aanbieders, gemeente en St. MEE. Toeleiding naar werk van mensen met een beperking./li liParticipatie in diverse regionale patiënten/cliënten platforms (o.a. PGB netwerk en RPCP -Zorgbelang)./li /ul pIn 2001 drie maanden (tijdens afstuderen) ziektevervanging in het Diakonesse Ziekenhuis te Zeist als medisch maatschappelijk werker (transfer- en indicatiebegeleiding)./p pJuni 2001 afstudeerproject ëSturen naar Kwaliteití. Het project richtte zich op het ontwikkelen van een zelfsturend team./p pVan september 2002 tot februari 2003, medeoprichtster van PGB Bureau. PGB Bureau is gespecialiseerd in administratiebeheer van PGB budgetten. Ik richtte mij op het zorginhoudelijke deel./p ul class=left liBegeleiden van startende woonprojecten/li lizorginventarisatie tbv indicatiestelling/li liPGB advies Stichting Thomashuizen/li /ul pIn 2002 betrokken bij oprichting van Nederlandse Branchevereniging PGB Adviseurs (NBPA)./p pHeel 2006 heb ik als Jeugdbeschermer gewerkt bij Bureau Jeugdzorg. Ik heb dit jaar veel ervaring opgedaan in het werken vanuit een gedwongen kader en geleerd over de juridische ascpecten van de Onder Toezicht Stelling, Jeugdhulpverlening in zín algemeen en indicatiestelling van Jeugdhulpverlening. Ook heb ik een functiescholing gevolgd (Pro Education en Bureau Jeugdzorg) en met positief resultaat afgerond.br / br / December 2006/p /body /html -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] font family : Mozilla issue
Thomas, On Dec 21, 2006, at 4:01 PM, Thomas Thomas wrote: I am trying to change the default font to = Lucida Sans Unicode I put this line of code in the root div container : font-family:Lucida Sans Unicode, Arial; this works for IE but not for Mozilla, A url to a page would help us debug this. If you tried to put a style element anywhere but the head element, browsers (except ie) will ignore it because it is not valid to put style or link anywhere but in the head. If I missed the point of the question, put up a test page and point us to it. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Form layout
Russ, On Dec 15, 2006, at 11:46 AM, Russ Peters wrote: (2) The selection menus for States and Raiders are not accessible without using a mouse on some browsers. (Safari works okay, not sure yet about IE, but no-go on Firefox). Also the radio buttons/check boxes are not accessible with just a keyboard. I'll look into this. Not sure why they wouldn't work using the keyboard, is there something I'm not doing correctly? You are fine. Being able to keyboard a select element is the browsers issue, not yours. Firefox has a setting that will let you tab to selects and type the first few letters of the item you want. IE win will let you tab into select elements by default. Once activated, you can type the first letter of the item you want and down arrow if there are multiple items with the same first letter. hth Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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/
Re: [css-d] bug with cursor in textarea in FF
Bernard, On Dec 12, 2006, at 9:45 AM, Bernu Bernard wrote: The following example : http://www.lptl.jussieu.fr/users/bernu/pub/bugtextarea.html works on most browsers : the cursor is visible everywhere in the textarea. BUT NOT IN FF up to version 2.0 The cursor is not visible when on top of a div with position: fixed. That sure looks like a browser bug. I filed a bug for this https:// bugzilla.mozilla.org/show_bug.cgi?id=363692. Unfortunately, I haven't been able to come up with a workaround. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] site check (IE7 please!)
Robin, On Dec 13, 2006, at 6:04 AM, Wonderbaby Designs wrote: I need checks on Macs and in IE7 mainly, but I would love as many checks as possible. Our CMS software adds some tables and extra code that I am wading through, but I think it's only affecting styling, hopefully the main layout is stable. Screenshots would be helpful if you notice any problems. http://209.59.136.73/ Mac checks in Safari2, ff2, Opera9, all match. ICab displays well except that the columns/footer stuff are _way_ down the page. IE/mac does a pretty good job of scrambling the layout, but everything is readable. IE/mac could probably be fixed, but you/your customer will have to decide whether it is worth it. The other option is to hide the css from ie/mac and let the users read an unstyled page. The only thing I noticed is that you don't have a background color specified for the body element. That means the browser default/user choice appears all around the edges of your layout. In my case it is kind of a blue-green color. I'm betting you were envisioning white :-) All in all, a nice looking page. -- Roger Roelofs __ 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/
Re: [css-d] image has border running over it
Robin, On Dec 11, 2006, at 3:14 PM, Wonderbaby Designs wrote: I have an element that gets floated up on top of the right column of my layout. The right column has a left border and I can't figure out how to get the image to float on TOP of the border. I've tried changing around the z-index on several of the elements... here is the completed site http://209.59.136.73/ z-index can only be applied to positioned elements. Adding position: relative; to #photo should give you the results you seek. I only tested in firefox, so you will want to double-check across browserland. -- Roger Roelofs __ 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/
Re: [css-d] forms FF2.0 vs. IE7
Raine, On Dec 11, 2006, at 7:15 PM, Raine wrote: I have a weird thing going on in a form. http://ececil.net/searchform.php In FireFox 2.0 the background color of input fields are white, but the same page in IE7 shows background color...a pale yellow as the background of the fields up in the header, and a bright green on the page. Do you have the google toolbar installed in ie? It marks fields with colors to indicate which ones can be auto-filled. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Firefox Misbehaves on Table Length
Marc, On Dec 8, 2006, at 9:39 AM, Marc Funaro wrote: http://nyslittree-org.advantex.net/index.cfm/fuseaction/ DB.ListNYSAuthors.cfm The list of authors in the main content area is long - Opera/Win and IE/Win have no problem with this, but in Firefox/Win the left menu is pushed down below the content area. It's not the WIDTH of the content area, but the height... And it appears to only be a problem on FireFox/Win. Also, ff/mac. I'm not sure why this is happening, but the following fixes it. For #twoColumnBody remove display: table; and add something else to contain the floats. I tried both float: left; and overflow: hidden; and they both looked fine to me. You will have to asses how this affects other pages on the site. This was tested in current versions of firefox, opera and safari. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Space under image link in Mozilla
Sandy,
On Dec 7, 2006, at 9:55 PM, Sandy Gonzales wrote:
I'm wondering if anyone has encountered an issue in Mozilla where a
link image has a space underneath it. http://rh-v2.cpdev.sudjam.com/
If you click on any of the navigation images you can see the
bounding box is about a pixel larger than the image at the bottom.
Same goes with the learn more and compare all plans or order
now buttons.
img elements are display: inline; by default. That means it is
leaving room for the tails of letters like p and y. Add something
like this
.learnmore img { display: block; }
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] need help with several positioning problems
Robin,
On Dec 3, 2006, at 4:23 PM, Wonderbaby Designs wrote:
I now have 2 layouts I'm working with - there's the one you posted
above
which is based on the negative margins article on ALA, and I have
the one
based on Skidoo with backgrounds added in now here
http://www.wonderbabydesigns.com/testing/final_test.htm
Sorry I didn't get back to you sooner on this. I had mentioned
moving the #copyright and #photo content to make it easier to stick
to the bottom. The following is tested in firefox and safari, but
not in ie/win
There was a div class=clear below the right col in the source, so I
put the copyrght and photo there. The code looks like this
-- html -
!-- /rightColumn --
/div
/div
div class=clear
div id=copyright
Copyright infobr /
must lock to bottom
/div
div id=photoimg src=http://www.wonderbabydesigns.com/testing/
testphotobox.jpg //div
/div
!-- /outerColumnContainer -- /div
I then added the following css
#copyright { float: left; margin-left: -209px; margin-top: -3em;}
#photo { float: right; margin-right: -200px; margin-top: -152px; }
#pageWrapper { background : #EAE8F3 url(rightground.jpg) repeat-x
bottom right; }
Essentially I used negative margins to put these items up and to the
left and right of where they would normally display.
If anyone is very good at translating print-based layouts into HTML/
CSS, I
would love some pointers on this.
The web is a completely different animal. For print, you are in
control in a very detailed way. For the web, the user is in
control. The best thing you can do is build in lots of flexibility
so the page will look reasonable to a reasonably large percentage of
your audience. Trying to exert the control you have in print onto
the web is a recipe for insanity :-)
design image
http://www.wonderbabydesigns.com/testing/design.jpg
neg.margin layout
http://www.wonderbabydesigns.com/testing/ALA_3col.htm
skidoo layout
http://www.wonderbabydesigns.com/testing/final_test.htm
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] Help with a few minor nitpicks please...
Max, On Dec 3, 2006, at 8:23 PM, Maxwell Balmain wrote: I redid a site I am working on for an artist friend. Her art is just darn cool and I am hoping this will help her. The site address is at: http://maxwellbalmain.com/jordan_03dec/ index.html 1) Safari: when you mouse over the picture thumbnails the css rollover effect is incomplete on the top row (only) in Apple Safari. The other rows roll over just fine. What version of safari are you testing with. I'm using a development build (Webkit) and it doesn't show this behavior. 5) And lastly the same li's in the absolute positioned wine bottle will show the i-beam cursor during mouse overs in all browsers. Why? All other links and hot elements show the standard default hand cursor during mouse overs. They aren't links. In other words, there is no a element inside of them. You could force the cursor using the cursor: pointer; css property, but that will confuse your users to no end. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] IE 6 pixel shift
David,
On Dec 1, 2006, at 3:14 PM, David Gonzales wrote:
I am new to CSS, and would truly appreciate some help with this
first CSS
project.
In IE 6 the header which contains the logo pushes down the yellow
nav bar
beneath it by about three pixels. I can't seem to figure it out.
The page is at
http://www.accd.edu/spc/spcmain/applet/120106/default.htm
IE has several 3px bugs. I would bet that this one is the
'whitespace' bug. Probably the simples solution would be to feed a
-3px top margin to ie6 and lower either through a conditional comment
or a css hack. Since you don't already have an ie style sheet, I
might be tempted to use a hack, but if you end up needing other ie
workarounds, a separate stylesheet might be easier to maintain. If
you choose the 'hack' method, the following should do what you need.
* html #topnav { margin-top: -3px; }
hth
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] help with bottom positioning column floats
Robin, On Dec 1, 2006, at 8:32 PM, Wonderbaby Designs wrote: I have sent a couple of messages but have only gotten one reply so I'm not sure if I'm doing something wrong in my messages, but I hope someone can help me. Here is the design I am trying to create http://www.wonderbabydesigns.com/testing/design.jpg This is what I have so far without the background images added to the content area http://www.wonderbabydesigns.com/testing/final_test.htm I'm not sure skidoo too is a good starting point for your layout. It assumes that the center column will always be the longest, and uses border colors to give the appearance of background colors to the left and right columns. This won't mesh well with your desire to add a gradient background image in the right and left columns. - The columns all seem to have padding or margins that I can't get rid of. I tried setting those values to zero but it didn't help The extra padding is on .inside. - The left column is a bit too wide and overflowing into the middle column. It must be the same width as the section above it in the logo image. I've tried adjusting the width of both the column and the margin behind it but neither works. On #outerColumnContainer, change border-left to 206px to match the logo. - the right column is either too far to the right in FF or too far to the left in IE (I think this is also a problem of those mystery margins that I can't seem to zero out) I wouldn't worry about ie until your design is closer to what you want. Working around ie bugs is much easier when the target isn't moving (or at least is moving less :-) ). - the copyright div in the left column and the photobox div in the right must each be locked to the exact bottom of the page at all times in their appropriate column. I think you will need to either move these two items to the bottom of the center column in the source and absolutely position them bottom: 0; or add a footer element and position them from there. Hopefully this will get you started. This layout would be a lot more straight forward if you didn't have to work around ie6's shortcomings :-(. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Not sure how to do this in CSS.
On Nov 30, 2006, at 6:57 PM, [EMAIL PROTECTED] wrote:
I am creating a site with a layout similar to the
http://www.milliondollarhomepage.com/ - I want blocks of 10px each,
and I
want 100 blocks across, and 100 blocks down.
I have been contemplating how to do this with CSS, and I cannot
think of
any way.
It has to be able to span over multiple spots (so you can have
either two
10px images or however many you want) so they somehow need to be
grouped.
You're probably going to have to absolutely position each element.
The html I'd envision is something like this...
ul id=adSpace
li id=a1 class=square20a href=img src=/a/li
li id=a2a href=img src=/a/li
li id=a3 class=rect1040a href=img src=/a/li
...
/ul
with something like the following css
#adSpace { position: relative; margin: 0; padding: 0; }
#adSpace li { position: absolute; }
#adSpace li, #adSpace a, #adspace img {
display: block;
margin: 0;
padding: 0;
overflow: hidden;
}
.square20 { width: 20px; height: 20px; }
.rect1040 { width: 40px; height: 10px; }
#a1 { top: 30px; left: 100px; }
#a2 { top: 50px; left: 50px; width: 20px; height: 50px; }
#a3 { top: 50px; left: 100px; }
This is assuming all your elements are images. Putting text into
this kind of a grid layout is an invitation to insanity.
hth
--
Roger Roelofs
Datacomp Appraisal Services
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] Not sure how to do this in CSS.
Jon, On Nov 30, 2006, at 7:29 PM, [EMAIL PROTECTED] wrote: The problem with doing it your way is having to define rect's and squares. Assuming someone bought 30px vertically, I would have to find the other 2 squares and remove them. I'm suggesting that you don't pre-define any squares. Just leave the unused space empty (or have some kind of background image for the whole grid that shows through the empty spaces). It does mean that you have to manually figure out where an empty space is and edit the css when you add a new image, but I think that's unavoidable. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Menu floats down in IE6
On Nov 30, 2006, at 10:44 PM, Jehangir Larry wrote: Thanks. I await your 'specific reply' eagerly and meantime have brought validation errors down by half! The remaining errors pertain to - Google search and the nav menu. I am reading the ALA article on 'satay' for the former; and, seek help on the latter. The navigation includes UL's with spans (to accomodate a JS script that collapses it.) It involves a nesting order that the validator does not seem to like! The menu is largish and unless each section auto-closes the navigation would be unseemly. It runs as follows (offending portion only): li class= AMain Item ul span lia href=# class=linkageSub-Item A/a/li lia href=# class=linkageSub-Item B/a/li lia href=# class=linkageSub-Item C/a/li /span /ul /li Please see www.indobioagri.com - 8 First of all, the span inside the ul will never validate, and the javascript should be able to target the ul as easily as the span. In fact, the sample code in the js documentation doesn't use any spans. Second, I think the main culprit of the float drop is the object element. It has a set width of 600px while #content has a width of 75%. IE/win will widen containers to make sure all the content fits. At narrower window sizes in ie, the flash object will force the #content to be wider then 70% and the float will drop. In other browsers, the flash just overflows and covers up part of the navigation list. Unless the client demands it, I'd get rid of the flash object and the scrolling window title. All that movement makes it hard to actually read the page. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Menu floats down in IE6
Larry, On Nov 29, 2006, at 8:56 PM, Jehangir Larry wrote: Apologies for posting earlier in HTML. Please see www.indobioagri.com - 8 All and any help, suggestions, pointers, appreciated. I don't yet have the answer to your specific questions. However, your html markup has 73 errors, some of them fairly serious. http:// validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.indobioagri.com% 2F I would suggest fixing the html first. Styling structurally invalid markup is a recipe for frustration because each browser tries to recover from markup errors in different ways. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Positioning Question
Michelle, On Nov 27, 2006, at 12:32 PM, Michelle Tarby wrote: I decided to scrap the original style sheet that was cobbled together by someone else and the original HTML and start over again. I'm just about there, but have gaps between the images in the right hand navigation in Firefox and can't figure out how to get rid of them. http://wwwdev.lemoyne.edu/campaign/index.html So far, I've trimmed the css and original html in half! Any suggestions would be appreciated! Indeed it is much improved. I'm not noticing any gaps in ff2 or safari2 on my mac. A couple of minor items. First, your document is xhtml 1.0 strict, but your server is serving it as text/html, which is incorrect. I'd suggest a document type of html 4.01 strict or xhtml 1.0 transitional instead. Second, I still prefer avoiding text as images unless you need something highly stylized. That way people with low vision can navigate the site more easily. Third, the html could use a bit more structure. Try viewing the site with css turned off to see what I mean. For example, I usually mark menus up as unordered lists. There's nothing authoritative about that, it just makes sense to me, and communicates better to users without css than a series of anchors that happen to be next to each other in the source. Give yourself a pat on the back. You've made a lot of progress. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Elementary questioning about positioning a div
Peter, On Nov 25, 2006, at 12:54 PM, Jazzcreation wrote: In fact I want to make a 30px high strip divide into 4 divs, first a 20px wide block, then a 100px wide block, then a block taking up the rest of the width, with a 1px stripe on top. In trying to make up an example, I discovered that the following code works. I didn't realise the RH divs would float up without specifically being given float property (which stops them filling the width). Is this a reasonable way of doing it? div div style=float:left;height:30px;width:20px;background- color:yellow; /div div style=float:left;height:30px;width:100px; background- color:green; /div div style=height:1px;background-color:red; /div div style=height:29px;background-color:rgb(182,194,194); /div /div What you have will work. It can be simplified even more... div div style=float:left;height:30px;width:20px;background- color:yellow;/div div style=float:left;height:30px;width:100px; background- color:green;/div div style=height:29px;background-color:rgb(182,194,194); border- top: 1px solid red;/div /div However, web pages aren't filled with empty colored squares. The first question is really What is the content/organization of this page? The answer to that question will influence the method you choose to get the page to look the way you want. Web pages are amazingly flexible, and the user is ultimately in charge. If we fight against the nature of the web, we pull our hair out, and our users go away unhappy. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Extra space in IE on css dropdown navigation
Ian,
On Nov 26, 2006, at 4:07 PM, Ian Young wrote:
#contentheader li ul {
visibility:hidden;
position:absolute;
top:1.5em;
left:0;
height:0;
overflow:hidden;
width:120px; (I would prefer ems here)
}
I'm curious what this code accomplishes. Her current code hides the
sub-menus off-left rather than using visibility: hidden. Why is it
better to hide them 'in place'?
It seems like there is more to undo on hover with this method. What
am I missing?
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] Padding in Firefox - Horizontal navigation menu sits too far to left
Anne, On Nov 24, 2006, at 9:15 AM, Anne Davies wrote: I've been working for ages now on this vertical horizontal menu in css and have slowly managed to improve it apart from a couple of things. It works great in IE but in Firefox it sits too far to the right, as if there's padding to the left. ... The dropdown in Firefox isn't perfect but I could live with it. http://www.aberdeenhq.com/test/ First, Don't re-invent the wheel unless you are using the process as a learning tool. Check out http://css.maxdesign.com.au/listamatic/ for many navigation examples. Second, Make sure your html and css validate. Invalid code can cause browsers to do very odd things. Third, If you do your initial implementation in a standards compliant browser (firefox, opera, konqueror or one of their cousins) you will have less work in the end. Fourth, Mozilla/Firefox's DOM Inspector is a great debugging tool. Fifth, I think your html and css could be much simpler and achieve the same result. The problems you are seeing are the result of over specifying the layout. In other words, the css is telling the browser to do things that contradict each other. Your specific problem is caused by the fact that ie adds margin to the li to make room for the list bullet while firefox and others add padding to the ul to make room for the bullets. If you add padding: 0; to #menuh ul the extra space will go away, but it will reveal other problems. Understanding how css works and how browsers implement it has a definite learning curve. If it would help, I could code up a sample of your page. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] div doesn't expand with content
Michael, On Nov 24, 2006, at 11:54 AM, Michael Simla wrote: Having trouble with a div, its probably something simple: http://tms.siborg.com/tricia.html In IE6 long text pushes the div down so there is a background, but in FF2, the main div is very short... i know its something simple though... The three columns in #main are all floated and so taken out of the normal document 'flow'. IE is displaying a convenient bug here. You can either float #main also, add a clearer inside #main at the bottom, or use the 'clearfix' method from p.i.e. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] hanging indent
Eliana, On Nov 24, 2006, at 7:06 PM, Eliana Berlfein wrote: Is it possible to make a hanging indent using css? A hanging indent is the opposite of a regular indent. It's when all of the lines after the first line are indented. Sure. text-indent: -1em; IE/win sometimes clips content at box edges, so you will want padding- left to be = text-indent. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Help with some minor browser compatibility issues
Andrew, On Nov 24, 2006, at 8:04 AM, Andrew S. Townley wrote: I've just put a new site live (http://www.archistry.com) ---8-- Opera 9 is another story completely. It was also doing better until I added the sidebars. Now, the content area overlaps the navigation area for me (984x768 - 1024x768 with 40 pixel dock on RHS). On my mac Opera 9.01 only does the overlap on the 'what you can expect' page. Opera also includes both logos in the print layout of the press release for some reason. It also has some problems with the print layout of the rest of the pages. The logo doesn't show up, so I suspect this causes the first column to be too small. The logo is in the document as an img element and in the print css in /v1/style/news/layout.css Finally, if anyone with a Mac can tell me how it looks, I'd appreciate it. I don't have one of those, but I would expect the KHTML-based browsers to do the right thing (that's why I'm testing with Konqueror). Firefox, Safari and Opera mimic the results you are seeing on your linux box. IE/mac is mostly unstyled, which is fine except that both logos are showing up which looks odd. The page still works and that browser is fading into the mists of time, so maybe you don't need to care. Also, you might want to specify a background-color on your body element. Not everyone has white set as their default. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Unwanted underlines in image links (Firefox)
Erik,
On Nov 10, 2006, at 11:26 AM, Erik Harris wrote:
There are times when I'd like a link to contain both an image and
text. I
want the text to be underlined, as usual, but I don't want the
image to be
underlined. This works fine in most browsers, but Firefox insists on
underlining the image.
Here's a page with numerous examples of what I'm talking about:
http://www.eharrishome.com/halloween/pumpkins.html
I've tried various variations of
a img {text-decoration: none; border: none !important}
with no luck. Nothing seems to turn off the rather unsightly
underline in
Firefox.
The image is display: inline; by default, so it is part of the text.
Set the image to display: block; and it will not be underlined. If
you choose to keep the br element, you will want to style it away
with something like display: none;
hth
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] Nested divs, constrain one within the other.
Mario, On Oct 21, 2006, at 12:29 PM, Mario Merino wrote: http://proximita.com/garnierarq/proyectos-garnier-arquitectos.html Hello, thanks for your time. In the html page above (table/css) #DivNoTable is the container for #imgCont, and I cant get #imgCont to constrain itselft to #DivNoTable. I want #DivNoTable to grow accordign to #imgCont but haven't been able to do that so far. One simple option is to add float: left; to #DivNoTable. If you can't float #DivNoTable for some reason, there are other ways to get it to contain all its floated contents, so let us know if you need more help with this. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] css-d Navigation menu inconsistencies between IE everything else
Jan,
On Oct 23, 2006, at 7:27 AM, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
I'm having a problem with the bottom nav bar on some of my pages -
the correct version is here: http://www.hillerypriest.co.nz/test/
pr01.html
and the incorrect version is here: http://www.hillerypriest.co.nz/
test/commercial.html
The css is http://www.hillerypriest.co.nz/test/css/all.css
For some reason, it's working fine in FF, Safari, Camino etc, but
in IE 6 IE 7 the nav bar appears to be out by 20px or so on some
of the pages.
Welcome to the list. I'm behind on answering mail as usual, but I
didn't see any other replies to your post. You may have fixed the
page already as it only looked about 5px off from firefox to me. You
are already hacking for ie anyway, so why not
* html #navigation li ul { bottom: 12px; }
hth
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] Safari Layout Problems
Alex, On Oct 24, 2006, at 10:26 AM, Alex Foley - OnWired wrote: I'm having problems aligning a form search box in the header of this page: http://www.toolcrib.com/index.aspx The box looks fine in Firefox and IE, but not in Safari. Often when this happens to me, it is because there's a tiny error in my css. Unfortunately there are a number of errors in the html. Run the html and css through the validators and fix any errors they find. After that, if Safari is still not working for you, let me know and I'll take another look. html http://validator.w3.org/check?verbose=1uri=http%3A%2F% 2Fwww.toolcrib.com%2Findex.aspx css http://jigsaw.w3.org/css-validator/validator? profile=css2warning=2uri=http%3A%2F%2Fwww.toolcrib.com%2Findex.aspx -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Partial percentage heights
Mike, On Oct 24, 2006, at 3:23 AM, Moe Aboulkheir wrote: I'm sure this question gets asked fairly often, though I tried searching the archive but could find anything - probably because it's difficult to compress into a short summary. If I have something like: body div class=navigation.../div div class=content.../div /body How can I have content take up all of the remaining vertical slack This isn't as easy as it seems like it should be, and the answer is very dependent on what exactly you are trying to do. If you are trying to get a footer to stick to the bottom of the viewport, check out this page http://css-discuss.incutio.com/?page=FooterInfo. Otherwise, put up a test page and we'll try to give you a more concrete answer. BTW, this design criteria often pups up early in a project, but turns out to be moot by the time you add all the content to the page, so I'd be tempted to save this problem to the end and see if it needs to be addressed at all. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] Mac IE5 positioning problem
Simon,
On Oct 24, 2006, at 5:49 AM, Simon Gough wrote:
I have a layout which works in Firefox, Safari, IE6 PC but totally
breaks in
Mac IE5. I've seen this before and can't remember what the problem
is. The
URL is:
http://www.redfront.co.uk
The centering technique for #contentwrapper is notoriously bad for ie/
mac, and has problems in other browsers too when the viewport (aka
window) is narrower than the content. Are you avoiding a simple
margin: 0 auto; for a particular reason?
Replacing your code with the following should work in all browsers
and has the added benefit of having the content stop at the left edge
and add a horizontal scroll bar for narrow viewports.
#contentwrapper {
margin: 0 auto;
background-color: #FF;
width: 760px;
position: relative;
}
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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/
Re: [css-d] Strange Navigation Menu Problems
Henry, On Oct 22, 2006, at 1:58 PM, Henry Felton wrote: Could I get some help on a new site I'm doing? The navigation menu is a normal drop down system; but the drop down parts aren't inline with their parent. Its obvious if you look at the site (www.oscar-radio.org/ static) only working in IE as yet. I am guessing that you found your solution. I just tried it in ff1.5 and it worked just fine. I also noticed the the sub-menus were marked up as sub-lists, which is necessary for the Son of Suckerfish technique. You might want to consider a min-height for the sub list elements to they are of equal height whether the link takes 1 line or two. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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/
Re: [css-d] margin ok, but bouncing menu
Raffaele, On Oct 19, 2006, at 5:10 AM, Raffaele Guaitoli wrote: I have a proble with this left menu http://www.formazioneazienda.it. the ul li a:hover state is set to have 1px solid border but when you hover over it bounces down. any suggestion to keep the border and avoid the noisy effect? You are getting a 1px shift on hover because you are adding a bottom border. You will have to remove 1px extra bottom padding on hover. Add padding-bottom: 3px; to ul li a:hover Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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] h2 tags with padding don't hover properly
Francis,
On Oct 19, 2006, at 8:56 PM, [EMAIL PROTECTED] wrote:
- http://www.fatgraffix.com/hrblshop-dev/shop_dev19/
1) in first menu, hover of main headings (h2 tags) work fine as
long as
zero padding is applied to the h2 tags
2) in second menu, hover of h2 tags don't catch the padded areas of
the h2
tags
seems that the hover should apply to the padded areas, but they
don't (on
windows IE, firefox and opera)...
i'm pretty sure that hovers usually work over list items with
padding, but
why not h2 tags ??
I'm a little confused. There aren't any declarations like
h2:hover {
color: pink; /* or whatever */
}
anywhere in the document that I could see. In fact, I don't see any
hover style declarations for any element.
Also, ie/win 7 only honors hovers on a elements, and only triggers
the hover when the mouse touches a bit of the text.
Any chance you could clarify what you are trying to accomplish?
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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/
Re: [css-d] link in FF
Kathryn, On Oct 18, 2006, at 4:47 PM, Kathryn Crutcher wrote: I am working on a touch screen kiosk that will use FF. In IE i could define the button size and background and the size specified was the link which is what I want. To get the background images to show completely In FF i ended up resorting to a table. Ideally, i want to get rid of the table. Even with the table, the link area is limited to the text plus padding. The button size is height 107px, width: 296px, and i want the entire button (or at least cell) to be a link. http://www.enermodal.com/kiosk/st_gabriels/Index.htm http://www.enermodal.com/kiosk/st_gabriels/Index.htm First you need to pay attention to the html. Until it validates, you will likely have issues with differences between browsers. Check out http://validator.w3.org/check?uri=http%3A%2F%2Fwww.enermodal.com% 2Fkiosk%2Fst_gabriels%2FIndex.htmcharset=%28detect+automatically% 29doctype=Inliness=1verbose=1 First you will need a doctype !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; Then you need to declare a character set (in head) meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 After that you need to change the id=button to class=button and change the css to match since you can only have on ie=button per page. You should be able to assign display: block; to the a elements in your menu and have them expand to fill the entire box. Also, I would avoid overflow: hidden on your body element. You can make it a fixed width so your kiosk won't have scroll bars, but allow the site to work on the web for those of us with smaller windows. No sense having to write it twice :-) Hope that gets you started. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Inline or block display for div question
Mark,
On Oct 18, 2006, at 4:07 PM, Mark Wheeler wrote:
Ok, I've been following the why margin-top/bottom don't work for
span class? thread, and have an offshoot question that has been
bugging me for some time. Say I have a div that has a little bit of
content such as:
.div1 {
border: 1px solid red;
padding: 5px;
margin: 5px 10px;
}
div class=div1This is the content/div
And I want to be able to set the margins and padding to what ever I
like, such as the above, how do I get the border to collapse around
the content? If set .div1 to:
display: block;
I get my margins and padding, but the div width (shown by the border
around the div) is the complete width of the page, and if I set .div1
to:
display: inline;
I don't get my margins, but the border now does collapse to the
content width.
The text inside your div is in an anonymous box which you can't
style. Adding a span to your code gives you something to hook into
and you can put the border on the span.
div class=div1spanThis is the content/span/div
Your other option is to use float which retains the block properties
but 'shrinks to fit' Incidentally, display: table; also shrinks to
fit, but is not supported in ie/win.
hth
--
Roger Roelofs
__
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] form fieldset legend in Safari
Suzanne,
On Oct 9, 2006, at 8:03 AM, Suzanne Goodwin wrote:
Hi, can someone please help me figure out how to get rid of this big
vertical gap from the legend down to the first div class=row in
my form on Safari?
http://www.outlooksoft.com/kc-about_us/contact_us.htm
All other browsers I've checked look just fine. It's happening in all
the forms on the site. Thanks in advance for any advice you can offer.
The problem is caused by the clear: both; on form.registration div.row.
it is clearing based on the length of the content of the right floated
column. You can avoid the problem by adding
#MainForm { overflow: hidden; } which creates a new positioning context.
What has me curious is why it _isn't_ happening in other browsers.
hth
--
Roger Roelofs
__
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] extra space after div in IE
Cheryl, On Oct 9, 2006, at 8:22 AM, [EMAIL PROTECTED] wrote: Sorry I didn't put up a url the first time. If you go to the url below you will see the problem in IE. Everythng is zeroed so I'm clueless. http://www.cherylamato.com/trusted/ Sorry, I've lost the original message, and the page looks the same to me in ff1.5 and ie6. Could you tell us again what you would like to see on this page? -- Roger Roelofs __ 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] vertical space in text
Arnie,
On Oct 12, 2006, at 4:17 PM, Arnie wrote:
Now I would like to add some vertical space and I am not sure what
is the accepted way to do that.
The site is a abshafer.com. Go down the menu to Genealogy.
Set a larger margin on the affected elements. Assuming they are
paragraph elements, something like the following should do.
p { margin: 2em 0; }
hth
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] Problem with Scrolling Div
Dean,
On Oct 11, 2006, at 9:19 AM, Dean Champeau wrote:
I created a div that contains variable-height content (a big table
that will expand and contract as the visitor changes type size). I'd
like it to scroll while taking up the entire height of the browser
window. So I created some properties for the div...
height:100%;
overflow:scroll;
This adds a scroll bar, but it doesn't allow scrolling. If I change
the height value to...
height:auto;
... I get the same result. However, if I change the height value to...
height:300px;
... then I get a scroll bar that actually scrolls the data, and it
eliminates the browser's own scroll bar, which is the effect I want.
What you really want is position: fixed; but ie6 doesn't support
it. Alternatively, you could set the height of the table container
to 100% - the size of the header section, which you can do with
proprietary ie css behavior code, but that won't work anywhere else.
You can get close with the following:
html, body {
font-family:Verdana, Arial, Helvetica, sans-serif;
height:100%; /* this height must be set for child heights to
work */
margin: 0;
padding: 0;
}
table-container {
height:90%;
overflow:auto;
}
#data {
font-size:.8em;
border-collapse:collapse;
width:99%;
margin: 0 0 0 6px;
}
Basically, I'm allocating 10% of the window height for the header and
giving the other 90% to the data table. This is only a 'sort of'
solution because it will cause double scroll bars at short window
heights and a gap at the bottom for tall ones.
BTW, it would be more semantic html to use thead and tbody rather
than two separate tables.
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] Unwanted space above horizontal list
Diana,
On Oct 4, 2006, at 10:25 PM, Diana Myers Hyatt wrote:
In Safari and Firefox, the banner is not flush with
the top of the browser window.
http://www.riversideca.gov/library2/
First, there some small xhtml validation errors that you may want to
fix. Fixing these will make it easier to verify that the css is at
least syntactically correct.
Second, one of the ul elements inside #header has a margin that is
sticking up out the top of #header. The following fixes the problem
but is a little too broad for production use.
#header ul { margin: 0; }
hth
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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] Best wawy to overlay images on a background
Scott, On Sep 27, 2006, at 7:56 PM, Scott Haneda wrote: I have a div class=footer clear=all/div Clear all doesn't exist. add clear: both; to your .footer css. Works fine, however, that image, has a need for me to drop in 4 logos and some type in the middle of it. I am hesitant to put the images in the background image, as they need to be changed at times, and also a are href links. Yes, you can put a div inside another. You are correct to want to avoid adding these images to the footer.jpg. The rule of thumb is that decoration images go in the css and content images (logos and photos that go with the test and links and such) should be img elements in the html. The best way to position these images depends on what you are trying to do. Sometimes absolute positioning is the way to go in a tightly controlled space like this. It's usually my last resort, however. Is there a url to a test page available? hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Adding a top border makes DIV snap to the top. Why?
Matt, On Sep 28, 2006, at 10:18 AM, Matt Dawson wrote: Here's a very basic question. I've set up a very basic example html file attached to this email. Attachments are stripped before the email is sent on to list members. If you could post page page and send us the url, we could see what you mean. if I delete the red border on the content column, the column unsnaps from the top of the body. Why is that? My best guess is 'Collapsing margins'. When 2 margins 'touch' they are allowed to overlap. This includes the margins of elements that are inside each other. For example if you have something like this div id=header h1Header 1/h1 /div The margin for the h1 can stick out the top of #header. which will look like extra white space above #header. Adding padding or borders to #header will keep the h1 margin from touching any other margin outside of #header and this will force the #header to grow to contain the h1 margin. Clear as mud, right? Here's a good article. http://www.complexspiral.com/publications/uncollapsing-margins/ hth -- Roger Roelofs __ 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] z-index
Travis, On Sep 28, 2006, at 4:03 PM, Travis Killen wrote: I would like the menu (#Menu) to appear 'on top of' (#Content) html:http://tylerstrings.com css: http://tylerstrings.com/templates/tystrings/css/template_css.css Thanks for posting the url to your page. It makes helping so much easier. Unfortunately, some parts of your code are contrary to other parts of your code, and when they conflict, different browsers will give different renderings. Therefore, I going to suggest a detour. First, validate your html. In your case, that just means removing the #searchme span (you can put the id directly on the form). Second, remove all bits of presentation from the html, that includes all the style attributes and the center element and transfer that information to the css file. Third, look at the page with css turned off to see if it makes sense. Once you are happy with how the page reads with css turned off, re-validate to make sure errors haven't crept in. Then you can add the presentation to the css file. Reality intrudes on this process sometimes, but if you aim for a process like this you page will work better on more different kinds of web clients. In terms of your actual question ( took me long enough to get here :-) ) the z-index will alter the natural stacking of positioned elements. Normally elements that come later in the document will stack on top of elements that came before it. So, in your case, #menu will stack on top of #content even without a z-index applied. Where it gets tricky is that each positioned element can serve as a base for a new stacking context, and the z-index only applies within the current stacking context. Here's an article that explains the concept better than I can http://developer.mozilla.org/en/docs/Understanding_CSS_z-index -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Styling the br element?
Jough, On Sep 27, 2006, at 11:29 AM, Jough wrote: This is where it gets interesting. If you are using XML (and supporting it with the application/xml header) it is legal to style anything whatever way you want to. For example: http://www.pacetools.com/Cow.php It's the cow tag! WHOOO!!! It is an interesting concept, but that document is technically invalid because xhtml has no 'cow' element. It would need to be served with an appropriate xml doctype (or no doctype at all) to be technically correct. Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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] Newbie-ish question
Mark,
On Sep 25, 2006, at 11:19 PM, Mark J. Reed wrote:
On 9/25/06, bill scheider [EMAIL PROTECTED] wrote:
I've modified and used the form found on Stu Nichols site with
good results.
It can be found here:
http://www.cssplay.co.uk/menu/form.html
What I do need is two rectangles with different colors in the same
vertical space. Which I don't know how to get outside of tables (or
table-* display: values, anyway), or explicit positioning which will
be easily thwarted by font size changes and the like.
You can use a list if you like,
ul class=radios
lilabel class=color1input type=radio The label/label/li
lilabel class=color2input type=radio The label/label/li
/ul
.radios { list-style-type: none; margin: 0; padding: 0; }
.radios li { margin: 0; padding: 0; }
.radio .color1 { background-color: pink; }
.radio .color2 { background-color: silver; }
.radios input { width: 1.5em; }
Somehow I missed the first message in this thread. If I missed the
point, let me know and I'll try again.
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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] background image not showing up
Liz,
On Sep 26, 2006, at 5:06 AM, Liz wrote:
Hello,
On this page http://www.liztestsitem.com/line/test.html the
content div
that contains the left and right column has a background image that
should
make a vertical line down the center but it is not showing up in
Safari or
Firefox. I need help in making it show. I thought that because the
columns
were within the content div it would give it the height to show,
but it
doesn't recognize the columns as part of its content.
What is tripping you up is that both the left and right columns are
floated. This takes both of the out of the normal document 'flow'
which leaves #content without any. There are many ways to solve
this, but the one you choose may depend on what else is happening on
the page. Here are some choices:
#content { float: left; } /* floating the content makes it expand to
hold the floated children */
The 'clearfix' method (which you can google for)
Adding a clearing element at the bottom of #content, Zoe has a page
about that as I recall. Again, google is your friend.
One of these solutions should get you where you want to go. Also,
See this article by Eric Meyer to understand float containment in
general. http://www.complexspiral.com/publications/containing-floats/
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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] Newbie-ish question
Mark, On Sep 26, 2006, at 9:47 AM, Mark J. Reed wrote: On 9/26/06, Roger Roelofs [EMAIL PROTECTED] wrote: Somehow I missed the first message in this thread. If I missed the point, let me know and I'll try again. Thanks for your reply. Take a look at the sample page, which I linked in that message you missed: http://www.thereeds.org/css/test.html The two groups of servers - active and inactive - are determined dynamically and populated with JavaScript. That's simplest if each group is contained within a single parent element (rather than having all servers of whichever type in one flattened list). I'd like to have the two boxes the same height even though there's extra information about each of the active servers displayed below their names and no such information on the inactive side. I've emailed you a sample file off-list. Essentially I took advantage of the fact that the active list side is always taller than the inactive list side and applied a variant of the faux-columns technique to simulate equal height boxes. If I've missed something, or the markup doesn't work with the javascript you are using, let me know. Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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] [w/website]page border doesn't border page
Kimi,
On Sep 21, 2006, at 11:29 PM, Kim Brooks Wei wrote:
Now I would like to change my layout a little bit. I would like to
center the top logo and the bottom navigation links to line up with
the middle of my content div. They now are centered to the page's
center line. Before I break my layout, I would like to ask for
suggestions - what might be the best approach(es) to try out to
achieve this effect.
Set the left margins of #logo and #btmnav to match the left margin on
#content like so..
#logo{ margin: 7px 0 20px 14em; }
#btmnav { margin: 30px auto 0 14em; }
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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] Menu gone awry in IE6 - SORTED?
Ian, On Sep 21, 2006, at 11:35 AM, Ian Young wrote: the menu script is working very well with one exception. In IE6 the text in the submenu does not fill the space as in other browsers. I have tried every which way to expand the hover and hover a parts of the code and nada. I even tried hard coding the width in pixels. http://www.iyesolutions.co.uk/menu-test.html css at http://www.iyesolutions.co.uk/includes/nav.css This is a known ie bug that i've learned to live with. Hopefully ie7 will be better about this. -- Roger Roelofs __ 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] URGENT... Client's requirement changed... Rip and tear at an entire CSS now??
Marc, On Sep 21, 2006, at 4:53 PM, Marc wrote: http://gmdc.retailwire.com/index.cfm/do/app.loginForm.cfm http://gmdc.retailwire.com/views/layouts/assets_default/gmdc.css The client has requested a change that dramatically changes the style for this page. They now want the Login for Existing GMDC Weekly Insights Subscribers to be a small box that floats below the RetailWire logo, and they want everything including and below New To GMDC Weekly Insights? To float top, left and then wrap around the login form box. I'm guessing from the look of the page that you have your solution. Is that true? -- Roger Roelofs __ 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] a:link in inline style, how?
Tee,
On Sep 15, 2006, at 2:45 AM, Tee Peng wrote:
Hi I need to do a inline style css that will be in the html mark. It
looks something like this
div style=font: arial; color: white; background: green; Link
here/div.
p style=font-size: 1.1emspan style=font-size: .7em; color:
#eeepowered by/spanXXX DOT COM /P
Obviously it can't be paced in the head. What option do I have?
There are 2 options. Make an image, or exactly what you have done.
I'd recommend the image, but otherwise your code only needs minor
tweaking, like so...
div style=font:100%/1/2 Arial sans-serif;!-- settings for whole
logo here --
div style=color: white; background-color: green;Link here/div
div style=font-size: 1.1emspan style=font-size: .7em; color:
#eee;powered by/spanXXX DOT COM/div
/div
I used all divs to avoid browser default styling, and I used a wrapper
div to set global styling. You may have to set a lot of styles on the
global div to cancel out user styles, for example the stylesheet for
the document could include div { text-transform: lowercase; }, and to
counteract it you would need to set text-transform: none; in the
wrapper div to counteract it.
The image solution is a lot easier/safer.
hth
--
Roger Roelofs
__
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] Link not working in Firefox
Riva, On Sep 14, 2006, at 7:51 PM, Portman wrote: I am almost done with a site that worked until I added a link to the home page. The link works fine in IE but not in Firefox. I have searched high and low and am close to pulling my hair out - if someone could tell me why it won't work in Firefox, I would be most grateful. http://www.starqualitydesigns.com/BestHealth #bodypart is covering up the links. It has a relative position top of -110px and a margin-top of -120px This pulls it way up over the header. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Table vs. CSS when decorative graphic required?
Anne,
On Sep 13, 2006, at 12:03 AM, Anne E. Shroeder wrote:
I'm scratching my head over this one. I've got two different
versions, one
using a table and one using CSS to layout the bars, but in neither
case can
I achieve a consistent underline across the screen as required. See
http://www.language-works.com/swimdesign/no-tables.htm for the two
versions, plus the graphic mockup which I'm trying to imitate! I
greatly
appreciate any insights. Can this even be done?
Yes, but the html needs to change. Getting the html well structured
before working on the css often helps stabilize the design. Also,
using good html markup will help users with css turned off and users
with devices that don't support css. Not to mention that using valid,
well structured markup helps browsers render your page more
consistently.
Try something like this...
div class=tabnavbar
!-- h3 is arbitrary, use whatever header makes sense within the rest
of the document --
h3Regions:/h3
ul
lia href=spanNorth America/span/a/li !-- lose the
spans if possible --
lia href=spanAsia/span/a/li
lia href=spanEurope/span/a/li
lia href=spanAll/span/a/li
/ul
form name=form2 method=post action=
select name=select size=1
option selectedChoose a Sector/option
option value=Sector 1Sector 1/option
option value=Sector 2Sector 2/option
/select
/form
/div
div class=tabnavbar
h3Products:/h3
ul
lia href=spanRisk Diagnostic/span/a/li
lia href=spanIRAPS/span/a/li
lia href=spanPortfolio Monitoring/span/a/li
lia href=spanBespoke/span/a/li
lia href=spanEducational/span/a/li
/ul
/div
Given that markup (which is usable unstyled too) the bottom blue line
you are having trouble with is as easy as
.tabnavbar {
border-bottom: 1px solid;
}
If you choose to use this markup and have difficulty applying your
other styles to it, let me know and I'll see if I can help.
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] application/xhtml+xml: background-color disappears!
Nick,
On Sep 11, 2006, at 1:32 AM, Nick Urbanik wrote:
If you look at http://nicku.org/index.shtml you will see the body
background-color is a light greeny colour #e5f5e9, but if you look at
http://nicku.org/index.sxhtml in firefox 1.5.0, you will see that the
background-color is missing. (If you look at http://nicku.org/ you
should get whatever your browser asks for).
Can anyone help me to understand why the background-color is missing
with application/xhtml+xml but is present with the exact same xhtml and
css served as text/html?
In html the body element is 'magical' in that it fills the viewport
(aka browser window) even when there isn't enough content to do so. In
xml that is not true. In xml the html element as the root element gets
this 'honor'. Changing your body style to
html, body { ...
should fix things right up.
Keep in mind that in xml there is no forgiveness for errors. The
parser just stops and puts up an error message rather than trying to
display the page anyway.
hth
--
Roger Roelofs
__
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] how to prevent two divs to break line?
Patrick,
On Sep 11, 2006, at 6:00 PM, Patrick Aljord wrote:
On 9/11/06, Roger Roelofs [EMAIL PROTECTED] wrote:
Without a test page, I can't be sure. The first thing I would try is
to add width: 24%; to #regions. If that doesn't work, put up a test
page and we'll try to give you a better answer.
here is the page http://haztucherry.sitlib.org/
Here are some beginning suggestions.
First, think about your markup. It is much more complicated than it
needs to be and it has presentation mixed in to the structure. The
categories look like a menu to me, so I would mark it up as a list of
links. Something like this...
ul id=categories class=clearfix
lia href=subcat.asp?subcat=1 onclick=...img
src=/images/people_juliane_krug_04a.png
strongTrabajos/strong/a
ul class=subcats
lia href=/anuncios/list?catid=62 title=ver lista de
anuncioscurriculum vitae/a a href=/anuncios/new?catid=62
title=crear anuncio de curriculum vitaecrear/a/li
lia href=/anuncios/list?catid=46 title=ver lista de
anunciosdomésticos/a a href=/anuncios/new?catid=46 title=crear
anuncio de domésticoscrear/a/li
li... and so on .../li
/ul
/li
lia href=subcat.php?subcat=2 onclick=...img
src=/images/handshake_01.png
strongServicios/strong/a
ul class=subcats
lia href=/anuncios/list?catid=62 title=ver lista de
anuncioscurriculum vitae/a a href=/anuncios/new?catid=62
title=crear anuncio de curriculum vitaecrear/a/li
lia href=/anuncios/list?catid=46 title=ver lista de
anunciosdomésticos/a a href=/anuncios/new?catid=46 title=crear
anuncio de domésticoscrear/a/li
li... and so on .../li
/ul
/li
li... and so on .../li
/ul
- css
#regions{
float:left;
width: 13em;
font-size : .9em;
}
#categories {
border: 4px solid;
background-color: white;
margin-left: 13.5em;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 15px;
padding-top: 1.5em;
}
/* if you want to force 3 columns */
#categories li {
float: left;
width: 33%;
}
/* If you want a specified width with as many on a line as the window
width can fit */
#categories li {
float: left;
width: 10em;
}
#categories a {
text-aign: center;
}
#categories img {
width: 60px;
height: 60px;
display: block;
margin: 0 auto;
}
#categories li ul {
display: none;
}
#categories li.show ul {
display: block;
}
#categories li li {
float: none;
}
I hope that gets you started.
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] how to prevent two divs to break line?
Patrick,
On Sep 10, 2006, at 5:25 PM, Patrick Aljord wrote:
I have two divs div id=regions blabla/divdiv id=categories
blabla/div. The problem is that when regions gets too much content,
the categories div
breaks line and is display below the region div. How can I force them
to
always be align even if that requieres to horizontally scroll the
screen?
here is the css code:
#regions{
float:left;
margin-right: 0px;
font-size : 15px;
color:black;
}
#categories{
border: 4px solid;
background-color: white;
width: 75%;
float:right;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 15px;
}
Without a test page, I can't be sure. The first thing I would try is
to add width: 24%; to #regions. If that doesn't work, put up a test
page and we'll try to give you a better answer.
hth
--
Roger Roelofs
__
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] Need some testing and bug fixes for a blog skin
Andy, On Sep 10, 2006, at 5:15 PM, Andy Mosmiller wrote: In any case, here are your relevant files: http://anonymousopinion.com/index.php?blog=1 http://anonymousopinion.com/skins/AO/AO.css Bugs I have seen: All: Using margin: auto; to align elements within posts or on the sidebar always fails. I have tried applying position: relative; to the parent block with no results. Fortunately, margin: auto; *does* work to align the page itself. Did you fix this already? The content looks centered to me... Mac: Looks fine in ff 1.5, safari 1.3, Opera 9 and iCab. ie/mac has problems. My initial guess there is that you have floats without widths which expand to 100% in ie/mac instead of 'shrink-wrapping' like they do in more modern browsers. If you want more info on css for ie/mac, visit Phillipe's site at http://l-c-n.com/IE5tests/ I forgot one Firefox bug. The header text in the calendar that displays the month enlarges weirdly. I tried to fix this several times with no results. I can confirm this, but I think it is related to the script that goes through and finds headings to replace. If you disable javascript, the caption is the size you would expect. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Mac assistance please?
Deb,
On Sep 9, 2006, at 10:21 AM, 4css aka deb wrote:
Ok, I loaded up the new style sheet work. One thing I didn't do was
add the clearing to the paragraph. Since I have the clearfix, it
should not be needed. That containing div has the clearfix within it
so it should be able to work without an additional clearing on the
paragraph. (IMO that is)
- Original Message -
From: Philippe Wittenbergh
To: CSS-D
Sent: Saturday, September 09, 2006 2:37 AM
Subject: Re: [css-d] Mac assistance please?
On Sep 9, 2006, at 7:24 AM, 4css aka deb wrote:
http://debsplace.org/artist/demo3b.html
I'm working on this site and it appears to be working on the pc
version browsers fine. However, the owner has a mac, and on his
browsers the pages aren't showing up too good.
On Mac IE 5, you do have some problems indeed.
1/ your 'clear fix hack' is not correctly working
* the 'hide form IE filter is wrong, you have a space after the
backslash. it shouldn't be there.
.clearfix {display: inline-block;}
/* \*/
* html .clearfix {height: 1%;display: block;}
/* */
* I prefer the use of inline-block to inline-table. More stable
2/ you actually over-constrain you layout, by setting width on non
floated elements
like on div#leftcolumnartist and sub-elements. remove that.
3/ p.tagline needs a clear:left to display correctly under the image
You missed some of Phillipe's instructions. Point 1, change this line
/* \ */
to
/* \*/
When using browser hacks like this, you have to follow the recipe
exactly, every character counts, including spaces. That alone will fix
80% of your problems.
You also missed a bit from point 2. Remove the width from
div#leftcolumnartist ul and everything else should snap into place.
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] konqueror/safary image problem
Fulka,
On Sep 8, 2006, at 6:11 AM, vwf wrote:
A website I'm working on works fine with Opera/Firefox/IE6, but fails
with Konqueror (3.3.2) and Safary (v?). The most dominant problem is
that the images are not shown.
http://www.umantec.nl/olland/
The problem is that mainwindow is stacking 'above' the left side
images in safari while it is 'below' them in the other browsers.
Using margin instead of padding should fix this. Try something like
this...
#mainwindow {
padding: 45px 0px 0px 0;
margin: 0 0 0 170px;
...
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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] Mac assistance please?
Deb, On Sep 8, 2006, at 6:24 PM, 4css aka deb wrote: http://debsplace.org/artist/demo3b.html I'm working on this site and it appears to be working on the pc version browsers fine. However, the owner has a mac, and on his browsers the pages aren't showing up too good. Actually it only looks bad in ie5/mac. It looks fine in current versions of firefox, safari, opera, and even iCab. IE/mac was written to follow the CSS 2.0 spec, which among other things, requires most floats to have defined widths. Hopefully Phillipe will jump in and help you out. His site, with lots of pointers for ie/mac is here http://l-c-n.com/IE5tests/. The sad thing is, 95% of the time ie/mac gets the css right, but the other 5% of the time it fails spectacularly, which is what is happening in your case. On the sites I maintain, ie/mac has dwindled to less than .1% of visitors, so I've been ignoring it lately. If you don't get specifics from others on the list, I'll see what I can do. In terms of the navigation, the sub-categories need to be indented more, maybe in a smaller font-size to make it clearer that they are sub-menu items. -- Roger Roelofs __ 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] layout problems
Ian,
On Jul 4, 2006, at 10:39 AM, Ian - Mediamint wrote:
www.cmsserver.info
www.cmsserver.info/css/css.css
The first is the buttons...if i take the doctype out they display as i
want them to (in IE at least - they won't display in firefox for some
reason)
The #nav li are set to display: inline; which means they can't take a
width or height. If you need to specify a width (as I suspect you do
given the background you want to use) you will need to float them
instead. Something like the following should get you close. However,
this kind of interface has been done to death. Just go to Listomatic
http://css.maxdesign.com.au/listamatic/ and find the one that
looks/behaves most like you want and use it as a starting point. The
biggest problem with the current design is that if a user has her/his
min font size set higher than you expect, the text will flow out of the
tab and be unreadable. That's why most tab style menus only curve one
corner and make the image oversize.
#nav {
padding: 0 0 0 3px;
margin: 0;
margin-bottom: -1px;
float: left;
}
#nav li {
padding: 0;
margin: 0 3px;
float: left;
list-style-type: none;
}
#nav li a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
color: #ff; font-size: 0.7em;
text-decoration: none;
padding: 5px 0;
margin: 0;
display: block;
width: 5em;
min-width: 100px;
background: url(../images/nav.gif) no-repeat center;
}
#nav a.active, #nav a:hover {
background: url(../images/nav_over.gif) no-repeat center;
}
hth
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] (no subject)
Simon, On Jul 3, 2006, at 4:41 AM, Simon Kerr wrote: Hi all. I've been trying to think of a way to make a nice fluid layout. My page consists of three content areas that are inline. Behind them is a background image (www.i4cevents.com). When the browser is resized, the content areas should move and the background image should shrink or enlarge. So far, this works quite nicely in ff and opera, but the background image is not displaying correctly in safari. Any idea why? Safari 2.0.3 seems to match firefox 1.5.0.x. What version of Safari are you testing with? Roger, -- Roger Roelofs [EMAIL PROTECTED] __ 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] Problem with Safari Mac
Pedro, On Jun 20, 2006, at 5:19 AM, Pedro Iturriaga wrote: http://comarcajoven.com/02_serviciosprogramas/creacion/ creacion_animacion_bases.htm only had problems with Mac: div creacion_dcha with text no float to the left of list, Bases concurso, Inscripción, etc. I haven't seen an answer to this yet, to I'll do my best. It is a 'float drop.' Set #creacion_dcha to width: 364px; and it will fit. I didn't take the time to figure out why safari needed the extra 6 pixels. Also, you should always validate your html and css before posting to the list. It is helpful if you tell us which browser is not displaying as you wish. I currently have 10 installed, and I had to try 4 of them before I saw the problem. Thank you for posting a url to the problem. It makes debugging much easier. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Wide Table and CSS Based Layout?
Jamie, On Jun 28, 2006, at 12:05 AM, Jaimie wrote: Thanks for the replies, I have tried this method and it does work but is not the look that I would like to have (overflow:auto). I thought that I might be missing something. Here is a link: http://soxc.org/css/index.html In IE 6.0 it works like I would like but then I have some float div issues with a sidebar that I have in the full version. I'm playing email catch-up, so ignore me if this point was covered and I missed it... If you want ie/win like behavior where #maincontent is forced to be as wide as the table inside it, you could use display: table; If you also have a right floated sidebar, this will cause problems as the floated sidebar will drop below the table. You might be able to get away with setting display: table-cell on #maincontent and the sidebar, but that depends on how the page is structured, and will require ie hackery. If you want a horizontal scroll bar for the table, then set a width and overflow: auto; on #maincontent. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Strange serif font in Firefox??
francky, On Jun 25, 2006, at 9:26 AM, francky wrote: This is my testpage http://home.tiscali.nl/developerscorner/css-discuss/test-serif.htm. Do you see the same in FF as in the screenshots? If yes, how come FF has such a strange default for the serif? Or maybe it is just some error in my win-pc? On my mac, ff 1.07 and 1.5.0.4 render similarly to each other and not like your ff screen shot. What happens if you create a new profile so you can be sure all settings are at their defaults? -- Roger Roelofs __ 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] CSS/JS dropdowns and IE 6 (so close...)
Tim, On Jun 11, 2006, at 9:27 AM, Tim Ware wrote: Hello, I'm using CSS/JavaScript dropdowns here: http://help.hyperarts2.com/ and they work perfectly everywhere except IE 6, and they *almost* work with IE 6! CSS: http://help.hyperarts2.com/_inc/nav.css JavaScript: http://help.hyperarts2.com/_inc/main.js The other styles are in the head of the index page, for now. --- 8 - So it's just the presence of the image that causes the browser to put the flash div above the dropdowns. The way out will be most appreciated! Finally, if there's a way to keep the active state on the top-level nav when mousing over the dropdown, that would be great. I haven't examined the javascript at all, but a few things come to mind: 1. You could likely make the css/javascript simpler by nesting the sub-navigation inside the main nav. It would also allow keeping the active state on the top level li. Something like this. ul li onmouseover=subabout(); a href=/about/About Us/a ul id=sub-about lia href=/about/Approach/a/li lia href=/about/management.htmlManagement/a/li lia href=/about/investors.htmlInvestors/a/li lia href=/about/board.htmlBoard of Directors/a/li /ul /li ... and the rest 2. You might want to consider moving the nodrop() function to the mouseout event of the subnav instead. 3. If the #flash div is to eventually contain a flash object, be aware that ie considers it a 'windowed control' (like an iframe) which will show through all that is above it. I vaguely recall that you have to export the flash in 'windowless' mode, but I'm not a flash expert so you'll want to double-check that. Since javascript questions are off-topic for this list, if you want more detailed help, you can contact me directly. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] styling SELECT OPTION
Zhonghai, On Jun 2, 2006, at 5:02 AM, Zhonghai Wang wrote: I am new here, and this is my first post in this list. So first of all, greeting !! Welcome! This list is a great place to be when learning css. I am trying to style the SELECT element in IE, The list wiki http://css-discuss.incutio.com/ is a storehouse of knowledge. In it you fill find this page http://css-discuss.incutio.com/?page=FormElements on styling forms. If you check out the links on that page you will find that ie (and some other browsers) use an os level widget that can only be styled in very limited ways. hth -- Roger Roelofs __ 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] Page footers
Fernando, On Jun 1, 2006, at 1:48 PM, Fernando wrote: I print many divs with style page-break-after: always; so my structure is like this div style= page-break-after: always; content4 /div div style= page-break-after: always; content3 /div ... I want to put a page footer in all pages, How to do it? The css way is to include the footer once in source and set it to position: fixed; in your print stylesheet. Unfortunately, browser support is weak in this area. Sometimes I think printing is an afterthought for browser developers, but I shouldn't complain because browsers are incredibly complex. Anyway, if the php approach doesn't appeal to you, you could do it with javascript instead. That's off-topic for this list, so if you want to pursue it, contact me off-list. -- Roger Roelofs __ 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] floating list/picture gallery style page
Skye, On May 31, 2006, at 4:54 PM, skye estes wrote: in firefox it works great, thanks to the idea of wrapping the pictures in lists in order to drop the text under them, but in i.e./win some of the pictures seem like they've randomly grown huge margins! the url is http://heli.cx/clients/pacifictao/dvds.html and the css is http://heli.cx/clients/pacifictao/main.css I use a mac, so I can't easily test this, but it might be the float double margin bug. If that is what it is, adding display: inline; to the floated elements should fix it. Also, do particular photos have to be in particular rows? The page would be much more flexible if the number of photos in each row was governed by the window width. My default window width causes the .imgnrw rows to display as a row of 4 followed by a row of 1. Also, if add a clearing element just after the end of the ul you can get rid of the min-height on the containing div. hth -- Roger Roelofs __ 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] Elements side by side
Scott,
On May 25, 2006, at 4:07 PM, Scott Hughes wrote:
I am working with XML using CSS and have an element named
underline_1/underline_1 in which I would like to have the
attributes for that element to be, of course, underlined. No text
except for numbering in sequence. Then I have a
para_underline_1/para_underline_1 in which I would like to have my
text and that element located and indented next to the underline_1
element. Does anybody know how I should handle that or can you give me
directions to a source.
I haven't seen a response to this yet, so I'll get things started (and
then leave for the weekend :-) ).
Styling xml is much like styling xhtml with one major exception. There
are no browser defaults (except that all elements are display:inline.
Based on your description, it sounds like you are working with an
ordered list structure, but I'm not sure. If we could see a section of
the xml, or better yet, a url, we could provide better help.
To directly answer your question: you can use float: left; /clear:
left; to get the elements side by side, like so:
underline_1 { float: left; clear: left; width: 3em; }
para_underline_1 { float: left; margin-left: 3em; }
If it is really an ordered list, then you should think about changing
the xml to not include the numbers (which will change the corresponding
css).
hth
--
Roger Roelofs
__
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] baby questions: images and aligning text right and left in div box
smithj7,
On May 25, 2006, at 12:30 PM, smithj7 wrote:
How is one to align images and assign properties like border= 0? Is
it in a div? I searched everywhere using css image property and so
forth and found nothing so I'm guessing such stuff is done another
way.
The first thing to keep in mind is that you want to keep content and
presentation of that content as separate as possible given current
browser constraints. So, the css goes in an external file and you
use a css selector to 'target' the content on your page. For
example, You have a myflorida logo in the upper left corner. You
can write a css selector like
#logo .floatleft img { border: 0; }
I'd suggest thinking about the content first. Forget about how it
looks and think about how the items group together on the page. If
the page makes sense with css turned off, you are more than half-way
there. After the html is close to final form, it is much easier to
design the css selectors that will target the parts of the page
efficiently. Pick ids and class names the describe the content
rather than describe how you want it styled.
Also in one box I hope to align some text right and some text left. I
found on the list discussion page an example of doing this with a
link,
but my text isn't a link. Maybe this is not possible.
It doesn't have to be a link. Any element will work fine. Just pick
the one that fits the content.
The current page is http://dbs.myflorida.com/
My tableless version is at http://dbs.myflorida.com/tablelessI.shtml
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
__
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] making of a nice login page
Hi Victor, On May 23, 2006, at 5:41 AM, victor NOAGBODJI wrote: I'm experimenting problems : - when I float left labels and inputs (clear that one also so e-mail and password won't be on same line) it doesn't work. So I removed it - I'm also trying to bottom align the texts and the input boxes but when I modify line-height it doesn't work Can you give us a url to your page? We can't debug what we can't see. -- Roger Roelofs __ 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/
