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:
>
>
>
>> This design assumes users will browse at full screen and have large
&g
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.incut
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/?pag
n-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.co
rflow 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
__
ut
>> 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
ft: 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
__
s 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
fil 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
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: 760
ith 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/
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 d
e but still remove the
spaces by writing it something like this
ClientsContractors
--
Roger Roelofs
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?pa
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 inform
st 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
r the list to show, but not the text inside the
> tags.
>
> But instead what happens is that everything inside the does not
> display.
>
> Shouldn't the CSS apply to within the tag, and leave the
> tag, which comes after the closing , alone?
Yes. I'm betting so
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
[E
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
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 head
d 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,
ing 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 wro
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
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-
: 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
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 wron
ou 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
--
Ro
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 in
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 directio
nctiescholing gevolgd (Pro Education en Bureau Jeugdzorg) en met
positief resultaat afgerond.
December 2006
--
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
~Allison Gappa Bottke
___
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 hel
ical in ff2 and op9.
My only suggestion is that the 'buy' button needs to be more
pronounced. I didn't even see it the first two time I looked at the
page.
--
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allo
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 fir
ou 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 al
r 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 . 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!&q
kground 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
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
ical position values are
'absolute' or 'relative', or occasionally 'fixed' or 'static'. Valid
float values are 'left' or 'right'
An invaluable tool for web development is firefox with its dom
inspector and the web d
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 Ro
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 P
ol 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_
ing 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-discus
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
r 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 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-tur
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-discu
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
__
tml markup has 73 errors, some of them fairly serious.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
David,
On Nov 28, 2006, at 5:23 PM, David Hucklesby wrote:
>> On Nov 27, 2006, at 12:32 PM, Michelle Tarby wrote:
>>
>>> http://wwwdev.lemoyne.edu/campaign/index.html
>>
> On Mon, 27 Nov 2006 22:10:27 -0500, Roger Roelofs replied:
>> A couple of minor items
s.
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
"R
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
"Re
quot; 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 u
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 t
ips 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
__
c
omething 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.
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,
> 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 element, you will want to s
tml
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%
2Fwww.toolcrib.com%2Findex.aspx
css
http://jigsaw.w3.org/css-validator/validator?
profile=css2&warning=2&uri=http%3A%2F%2Fwww.toolcrib.com%2Findex.aspx
--
Roger Roelofs
"Remember, if you’re headed in the wrong directio
ges.
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
n 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-discu
k 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,
--
he 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
__
nsider 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
_
n 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
_
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,
--
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-dis
e 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.
-
ader 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.
ts. 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
__
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/li
ou 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 [EMAI
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
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
___
n
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
___
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 P
ut trying to get pixel
perfect line-up. It will work better if you make an image that
combines left and right and add it to .wrap with a repeat-y.
I'm sending you a copy of your page off-list with some other changes.
--
Roger Roelofs
"Remember, if you’re headed in the wrong direction
/Cow.php
>
> It's the 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.
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
olutions 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]
___
irst 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 te
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://
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
> 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 be
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 ea
t; 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
"
e 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,
after the cursor moves off ?
Nope. You are wanting to control behavior, which puts you squarely
in javascript land. It's really not a bad place to be :-) (as long
as you're not asking 'on-list').
Roger,
--
Roger Roelofs
[EMAIL PROTECTED]
_
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
>
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 PR
nds 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
_
oat: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
acter 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
an .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 th
s 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;
...
R
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
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
bar, 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 al
te 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.
--
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 defa
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.
yled 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://cs
1 - 100 of 346 matches
Mail list logo