Re: [css-d] Layout glitching on href hover
So no takers on this? Am I missing something so simple that everyone was afraid to tell me? No one has IE 10 to test in? The layout has changed on the actual page, but I'd still love to know what was going on on my test page... Thanks! On Mon, Feb 25, 2013 at 11:38 AM, Tom Livingston tom...@gmail.com wrote: Listers, I have this layout: http://proof.mlinc.com/tl/cssd3/test.html In Win 8, IE 10 (desktop or 'metro'), when we hover over the href in the middle callout at the bottom, the shadowed containing div of the three callouts expands down is some broken and odd way leaving odd double rounded corners sorta. Can anyone reproduce this weirdness and/or see why? TIA -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout glitching on href hover
On 27.02.2013 11:30, Tom Livingston wrote: http://proof.mlinc.com/tl/cssd3/test.html In Win 8, IE 10 (desktop or 'metro'), when we hover over the href in the middle callout at the bottom, the shadowed containing div of the three callouts expands down is some broken and odd way leaving odd double rounded corners sorta. Can anyone reproduce this weirdness and/or see why? See it in IE10 on win7, but so far have no idea why or what to do about it. I have a similar buggy re-rendering when hovering link in IE10 on one of my pages, that I haven't got around to find fix for yet. regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout glitching on href hover
On Wed, Feb 27, 2013 at 11:49 AM, Georg ge...@gunlaug.com wrote: On 27.02.2013 11:30, Tom Livingston wrote: http://proof.mlinc.com/tl/**cssd3/test.htmlhttp://proof.mlinc.com/tl/cssd3/test.html In Win 8, IE 10 (desktop or 'metro'), when we hover over the href in the middle callout at the bottom, the shadowed containing div of the three callouts expands down is some broken and odd way leaving odd double rounded corners sorta. Can anyone reproduce this weirdness and/or see why? See it in IE10 on win7, but so far have no idea why or what to do about it. I have a similar buggy re-rendering when hovering link in IE10 on one of my pages, that I haven't got around to find fix for yet. regards Georg __**___ Thank you Georg. Good to know I am not going crazy. Yet. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout glitching on href hover
On 27.02.2013 11:55, Tom Livingston wrote:
Good to know I am not going crazy. Yet.
:-) ... apparently not yet.
The addition of...
.calloutwrap p {overflow: hidden;}
...seems to make IE10 behave in your case. You must check at your end so
we know it isn't an only on some systems fix.
I'll test if that fix works in my cases, when I get around to it.
Installed IE10 yesterday so I am a little behind.
Now, I haven't found out what IE10 does here. May be a new version of
Trident's old (un)collapse margins erratically on re-flow bug ...
haven't had to battle that bug since IE6. Must investigate further.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout glitching on href hover
On Wed, Feb 27, 2013 at 12:56 PM, Georg ge...@gunlaug.com wrote:
On 27.02.2013 11:55, Tom Livingston wrote:
Good to know I am not going crazy. Yet.
:-) ... apparently not yet.
The addition of...
.calloutwrap p {overflow: hidden;}
...seems to make IE10 behave in your case. You must check at your end so
we know it isn't an only on some systems fix.
I'll test if that fix works in my cases, when I get around to it.
Installed IE10 yesterday so I am a little behind.
Now, I haven't found out what IE10 does here. May be a new version of
Trident's old (un)collapse margins erratically on re-flow bug ... haven't
had to battle that bug since IE6. Must investigate further.
regards
Georg
OK, thanks. I'll give it a shot.
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout glitching on href hover
Listers, I have this layout: http://proof.mlinc.com/tl/cssd3/test.html In Win 8, IE 10 (desktop or 'metro'), when we hover over the href in the middle callout at the bottom, the shadowed containing div of the three callouts expands down is some broken and odd way leaving odd double rounded corners sorta. Can anyone reproduce this weirdness and/or see why? TIA -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout glitching on href hover
UPDATE: It appears that removing the min-height on the .callout items stops the problem. Anyone see how I can get around the issue? I would like to keep the min-height for layout reasons... TIA On Mon, Feb 25, 2013 at 11:38 AM, Tom Livingston tom...@gmail.com wrote: Listers, I have this layout: http://proof.mlinc.com/tl/cssd3/test.html In Win 8, IE 10 (desktop or 'metro'), when we hover over the href in the middle callout at the bottom, the shadowed containing div of the three callouts expands down is some broken and odd way leaving odd double rounded corners sorta. Can anyone reproduce this weirdness and/or see why? TIA -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] layout problems on first page load only
On this page: http://125.pratt.edu/gallery/searchcategory=featured/featured In Firefox on the mac, the row of yellow tabs (navigation) are spreading out too far when the page initially loads. If you do a page reload, they load correctly (one next to the other), with the whole bar of tabs not being wider than the elements above/below it. I notice on page reload the grey box that says 'did we miss someone' also moves to the left. Any ideas what is wrong here? Also, on the same page, in Chrome, i get a thin grey rule under the row of yellow tabs and I cannot figure out where it is coming from. Thanks! Rory __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout problems on first page load only
On Sun, 18 Mar 2012, Rory Bernstein wrote: On this page: http://125.pratt.edu/gallery/searchcategory=featured/featured In Firefox on the mac, the row of yellow tabs (navigation) are spreading out too far when the page initially loads. If you do a page reload, they load correctly (one next to the other), with the whole bar of tabs not being wider than the elements above/below it. I notice on page reload the grey box that says 'did we miss someone' also moves to the left. Any ideas what is wrong here? Also, on the same page, in Chrome, i get a thin grey rule under the row of yellow tabs and I cannot figure out where it is coming from. Thanks! The first step is always to correct your HTML: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2F125.pratt.edu%2Fgallery%2Fsearch%26category%3Dfeatured%2Ffeatured Errors found while checking this document as XHTML 1.0 Strict! Result: 124 Errors, 201 warning(s) -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout problems on first page load only
On Sun, Mar 18, 2012 at 2:38 PM, Chris F.A. Johnson ch...@cfajohnson.com wrote: The first step is always to correct your HTML: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2F125.pratt.edu%2Fgallery%2Fsearch%26category%3Dfeatured%2Ffeatured Chris F.A. Johnson Rory, Go to Tidy Online http://infohound.net/tidy/ Cut and paste your page markup in the box. Where it says Doctype [auto] change it to Doctype [transitional] Click the big green Tidy Cut the tidied page. Reload Tidy. Paste the tidied page in the box. Click the big green Tidy Cut and paste the tidied page in your editor. Upload the tidied page to your server. The above steps will validate the html. Please note that while it is a good idea to run valid markup, valid html -- in your case -- *will not* correct any of the page issues you wrote about... Best, Isak Dinesen Kenya, Africa -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] layout
Comments and suggestions appreciated http://chelseacreekstudio.com/z/z.php This end: OS X 10.4.11 Android/2.2.2/ with Opera Mobile and OperaMini. Best, Angelina -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout problem? maybe a float problem?
Thank you, Theirry. I put a surrounding div around the 2 divs that weren't behaving, and stopped the absolute positioning of the one div. Put overflow: hidden on the surrounding div and my life is hugely improved. Sorry for those excessive clear:both things, I had thrown a bunch of them in there for the purpose of just seeing what was happening, and they didn't fix anything but I forgot to remove them. I so appreciate your help in this, it is a great thing for me to be able to ask for help and get such expert advice. Best, Rory You may want to rethink your construct. After your homepage_maincontent box I can count no less than *four* elements with clear:both, but what are they supposed to clear? I can't find a float in there... You'd be better making the above container a float rather than a absolutely positioned div. And even if you do that you can still remove all the clear:both in there, as you should be able to contain that float inside #container via overflow:hidden;zoom:1; or any other new block formatting context trigger. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout problem? maybe a float problem?
Rory Bernstein wrote:
Thank you, Theirry. I put a surrounding div around the 2 divs that weren't behaving, and stopped the absolute positioning of the one div. Put overflow: hidden on the surrounding div and my life is hugely improved.
Sorry for those excessive clear:both things, I had thrown a bunch of them in
there for the purpose of just seeing what was happening, and they didn't fix
anything but I forgot to remove them.
Thats what I do with CSS, just throw something in and see how it
appears cross browser. Seriously though, it much better to see how
much you can remove from your CSS while keeping the layout intact.
I so appreciate your help in this, it is a great thing for me to be able to ask
for help and get such expert advice.
Best,
Rory
I had a look at your CSS and notice your reset.
Are you able to delete all of this,
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
and play around with for layout by seeing how much you can delete.
Example.
#footer_container ul {
list-style-type: none;
margin: 20px 20px 10px 40px;
}
Without the reset, you wouldn't quite need the above margins. The
downside is that you have to become accustom to IE7 (or earlier) bug
behavior with defaults and hasLayout.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] layout problem? maybe a float problem?
I have a layout problem here: http://www.glitterlemonade.com/fundraiser/detail/monsters_magnetic_figures On other pages on the site, the footer behaves and shows up under the rest of the content, but not on this page. Here it is OK: http://www.glitterlemonade.com/get_involved In general the footer, when I added it to the site at the end, was showing up in weird places and not always with the same spacing above it. I suspect it has to do with not clearing floats properly but I can't get to the solution. Thank you, Rory __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout problem? maybe a float problem?
I have a layout problem here: http://www.glitterlemonade.com/fundraiser/detail/monsters_magnetic_figu res On other pages on the site, the footer behaves and shows up under the rest of the content, but not on this page. Here it is OK: http://www.glitterlemonade.com/get_involved In general the footer, when I added it to the site at the end, was showing up in weird places and not always with the same spacing above it. I suspect it has to do with not clearing floats properly but I can't get to the solution. You may want to rethink your construct. After your homepage_maincontent box I can count no less than *four* elements with clear:both, but what are they supposed to clear? I can't find a float in there... You'd be better making the above container a float rather than a absolutely positioned div. And even if you do that you can still remove all the clear:both in there, as you should be able to contain that float inside #container via overflow:hidden;zoom:1; or any other new block formatting context trigger. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout problems: extra vertical space
Here I am again, with different layout problems on the same project, different page: http://weinraub.ehclients.com/lawyers/ You will see some annoying grey, horizontal strips on the page: under the photo of the windows under the black nav bar another one just under that... and one at the bottom I can't figure out what is doing this and it is making me crazy. It is the background color of the containing div that is showing through, but I don't know why the divs are not sitting one on top of another, with no space between, as I want it to be. Design comp is here: http://rorybernstein.com/gradweinraub/subpage_lawyers4.html Thanks! Rory __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout problems: extra vertical space
http://weinraub.ehclients.com/lawyers/
You will see some annoying grey, horizontal strips on the page:
under the photo of the windows
under the black nav bar
another one just under that...
and one at the bottom
Declare...
img.yourclass {display: block;}
...or...
img.yourclass {vertical-align: bottom;}
...for those images.
Either styling will solve the problem you have with images'
default-rendering as inline-elements with space for descenders in such
cases.
regards
Georg
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout problems: extra vertical space
Thanks, Georg. That helped a lot! http://weinraub.ehclients.com/lawyers/ It is strange, but the image of the windows I had to use the vertical-align: bottom; rule, and the other 2 images liked the display: block; rule. When I used the display rule on the windows it moved it out to the right of the container. No idea why! But now things work fine. Thanks! Rory __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout problems: extra vertical space
Depending on relation to other elements you may have to add 'clear: left', 'right' or 'both' on an image to make it stay in position when applying 'display: block'. Images do after all start to behave like block-elements when you declare it. regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout problems: extra vertical space
Ah. OK, makes sense. Thank you so much. Always an education on this list. Rory On Oct 18, 2010, at 3:49 PM, G.Sørtun wrote: Depending on relation to other elements you may have to add 'clear: left', 'right' or 'both' on an image to make it stay in position when applying 'display: block'. Images do after all start to behave like block-elements when you declare it. regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] layout IE trouble
Hi the site is http://tk-studio-design.webhop.org (must be without www). I checked on IEtester and have problem with layout of picture and footer. They are moved right, out of the screen. Site is powered by Joomla and still under construction. I am not sure if U can access it, because I am hosting it from home and will be down time 10.00 pm 8.00am GMT, apologize. any advise will be appreciated as well as critique. Thanks in advance Tom __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help needed, almost right
Thanks for help provided; so far, still looking for more :)
First, the discussion about the font style is a bit early in this process. I
have not decided on a font styling for my pages. The fonts I chose before were
just something I had grabbed from a previous file I had worked on. Below I put
some fantasy fonts to see what they look like. I am not focused on this part
of my design (just yet).
Second, ideas of using h1 and h2 as the header/footer is an interesting
idea, but I'd rather keep those tags for what they ere designed for.
Next, I've updated my test (below). It works better, but still has issues.
For example:
* in Firefox (v.3.6.3) the right sidebar is not visible. What
spacing/padding am I doing wrong?
* The internal links work just fine in Safari (v.5.0), but not in Opera
(v.10.53 v.10.54). The a.. link I have is above each associated header
with a very thin space. Clicking in Opera the paragraph p below the header
is brought to the top of the page. In Safari, the header is correctly at the
top of the page. Is the way I put the internal link incorrect?
* I am not sure the right sidebar is correct. I have to overrule the hr
element to get it to appear. Without that overrule entry the element is barely
visible on the right. What did I miss?
* I agree in some areas, I am a bit verbose in some of the css elements,
still trying to figure out the shortcuts. :)
Thanks again for all your help and insight. Again, I apologize for having such
a long message.
Eric
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html lang=en-US dir=ltr
head
titleTechnical Travails - homepage/title
meta name=author content=Eric Peterson
meta http-equiv=Content-Type content=text/html;charset=utf-8
meta http-equiv=Content-Language content=en-US, en
meta
name=robots
content=noindex, nofollow, noarchive, nosnippet, noodp, noydir,
noimageindex, notranslate
link
rel=icon
href=images/favicon.ico
type=image/vnd.microsoft.icon
style
body {
margin : 0;
padding : 0;
background-color: #FCF8DC;
color : #00;
}
div.header {
background-color: #E9E8AE;
color : #FF6600;
display : block;
font-size : 2em;
height : 1.25em;
margin : 0;
position: fixed;
right : 0;
top : 0;
width : 100%;
z-index : 1; /* be on top of right column */
}
/* over rule hr shorter length */
hr.nav_hr {
width :100%;
}
div#rightcol {
background : #D7D394;
color : #00;
float : right;
width : 10em;
height : auto;
padding-left: 0.5em;
min-height : 100%;
display : inline;
padding-top : 1em;
padding-bottom : 1em;
position: fixed;
margin-left : 85%;
margin-bottom : 4em;
margin-top : 2em;
margin-right: 0;
overflow: auto;
width : 100%;
}
div#content {
background : #FCF8DC;
color : #00;
float : left;
width : 80%;
height : auto;
margin-top : 1.25em; /* height of header */
padding-left: 1.5em;
padding-bottom : 1.5em; /* height of footer */
}
div#footer {
clear : both;
background : #CC9966;
bottom : 0;
color : #FF;
font-size : 1em;
height : 1.5em;
vertical-align : middle;
position: fixed;
text-align : right;
width : 100%;
}
hr {
width : 75%;
color : #CC9965;
}
/* links in TOC on right div */
a.nav, a.nav:visited {
color : #FF;
display : block;
font-weight : bold;
text-decoration : none;
}
a.nav:hover {
color : #006600;
}
h1.title {
color : #CC3366;
font-size : 0.9em;
font-family : fantasy;
padding-left: 0.5em;
padding-top : 0.2em;
margin : 0;
}
h4.title {
color : #CC3366;
font-size : 1.5em;
font-family : Herculanum, Papyrus, fantasy;
margin : 0;
}
table.header {
height : 1.25em;
width : 100%;
}
table.header td {
padding : 0;
}
table.header td#right{
color : #996633;
font-family : sans-serif;
font-size : 30%;
padding-right : 2em;
text-align : right;
}
Re: [css-d] Layout help needed, almost right
Eric Peterson wrote: Thanks for help provided; so far, still looking for more :) First, the discussion about the font style is a bit early in this process. I have not decided on a font styling for my pages. The fonts I chose before were just something I had grabbed from a previous file I had worked on. Below I put some fantasy fonts to see what they look like. I am not focused on this part of my design (just yet). Second, ideas of using h1 and h2 as the header/footer is an interesting idea, but I'd rather keep those tags for what they ere designed for. Next, I've updated my test (below). It works better, but still has issues. For example: * in Firefox (v.3.6.3) the right sidebar is not visible. What spacing/padding am I doing wrong? * The internal links work just fine in Safari (v.5.0), but not in Opera (v.10.53 v.10.54). The a.. link I have is above each associated header with a very thin space. Clicking in Opera the paragraph p below the header is brought to the top of the page. In Safari, the header is correctly at the top of the page. Is the way I put the internal link incorrect? * I am not sure the right sidebar is correct. I have to overrule the hr element to get it to appear. Without that overrule entry the element is barely visible on the right. What did I miss? * I agree in some areas, I am a bit verbose in some of the css elements, still trying to figure out the shortcuts. :) Thanks again for all your help and insight. Again, I apologize for having such a long message. Eric Yes, Eric... Any better, now? http://chelseacreekstudio.com/ca/cssd/ee.html Extensive CSS/markup revision. Quick checked in Mac browsers. Not checked in IE/8. Best, ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help needed, almost right
David Laakso wrote:
This:
html {
font-family : Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
font-size: 80%;
}
Becomes this [user friendly and shorter]:
html {
font : 100%/1.4 Helvetica, Arial, sans-serif;
}
With the greatest respect, your dislike for the fonts which
Microsoft explicitly commissioned for the web (Trebuchet MS,
Tahoma, Verdana : I do not seek to defend Georgia !) is surely
not sufficient reason for recommending that Eric jettison
them in favour of Helvetica and/or Arial ? I would respectfully
suggest that there is nothing objectively superior about the
latter, and if the designer prefers the MS three, then he
should feel free to specify them.
Philip Taylor
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help needed, almost right
On 2010/06/27 12:41 (GMT+0100) Philip Taylor (Webmaster, Ret'd) composed:
David Laakso wrote:
This:
html {
font-family : Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
font-size: 80%;
}
Becomes this [user friendly and shorter]:
html {
font : 100%/1.4 Helvetica, Arial, sans-serif;
}
With the greatest respect, your dislike for the fonts which
Microsoft explicitly commissioned for the web (Trebuchet MS,
Tahoma, Verdana : I do not seek to defend Georgia !) is surely
not sufficient reason for recommending that Eric jettison
them in favour of Helvetica and/or Arial ? I would respectfully
suggest that there is nothing objectively superior about the
latter, and if the designer prefers the MS three, then he
should feel free to specify them.
If the OP's intent is to ensure that the visitor's preferred font family (or
size) is unlikely to be that actually used, then his list is a virtual
guarantee that will happen.
In the case of the OP's list, the three M$ web fonts are similar only in that
they are for the web M$ sans-serif designs. In no other way is Trebuchet
similar to Tahoma or Verdana, while Arial is little but a clone of Helvetica[1].
Tahoma is little other than Verdana with it's letter spacing reduced to a
tiny fraction of Verdana's, making either a poor substitute for the other,
or, due to their larger x-height, for Arial.
The idea with CSS specifying more than one is generally that if the first is
unavailable, that the next suggestion be a similar one to the first, and that
if the second too is unavailable, that the third too is similar to the first.
David's respectful suggestion makes sense, while the OP's (rude: 80% of
visitor preference size), absent intent of extreme control, makes none.
[1] http://www.ms-studio.com/articles.html
--
The wise are known for their understanding, and pleasant
words are persuasive. Proverbs 16:21 (New Living Translation)
Team OS/2 ** Reg. Linux User #211409
Felix Miata *** http://fm.no-ip.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help needed, almost right
David Laakso wrote: Ooops. http://chelseacreekstudio.com/ca/cssd/5.html ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help needed, almost right
Eric Peterson wrote: Below is the test page I've been playing with. What I am trying to do is * have a header block at the top of the page/screen * have a footer block at the bottom of the page/screen * have a menu side bar on the right with links that does not scroll with the main content * have the content block scrollable only * keep it as simple as possible for repeated use Eric Eric, I think this layout may resolve two issues? 1/ The Safari footer/content overlap. 2/ Something you did not mention -- an extraordinary long line-measure in wide windows, particularly at 116.5 to 140 dpi. I only checked it in Mac Opera, Camino, Safari, and Firefox. Based on a stripped and modified concept/layout [1] by Georg Sortun. [1] http://www.gunlaug.no/tos/moa_8b.html Best, ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help needed, almost right
Interesting use of h1 and h2 as the footer and header. Thinking about it, I would have chosen h5 and h6 as they seem to be used a lot less. If I wanted to use h1 as a header in this context, I would have to redefine a different header to emulate what the h1 used to have. Not really a problem, just a change in thinking what the hn mean. Why did you choose to use h1 and h2 in this manner? Why would a div class=header definition not work the same way? Is there something about the h1 that is 'easier' or 'better'? Thanks much, this gives me some more insight into what I'm looking to do. On 27 Jun 2010, at 10:21 , David Laakso wrote: David Laakso wrote: Ooops. http://chelseacreekstudio.com/ca/cssd/5.html ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help needed, almost right
Eric Peterson wrote: Why did you choose to use h1 and h2 in this manner? Why would a div class=header definition not work the same way? Is there something about the h1 that is 'easier' or 'better'? I did not choose the method, I simply stripped Georg's layout, and deleted the left-column. I am not in the position to disagree with a software/hardware engineer who knows far more about CSS/html than I ever will... :-) . If you want to try div class=header do so. But I would make it an id not a class, since there is only one header on that page. Best, ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help needed, almost right
This:
html {
font-family : Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
font-size: 80%;
}
Becomes this [user friendly and shorter]:
html {
font : 100%/1.4 Helvetica, Arial, sans-serif;
}
David, for someone whose contributions here are so consistently
helpful and well-informed your crusade against Verdana is difficult to
comprehend, and out of place on this list. Several times I've nearly
risen to the bait of previous comments but held back 'cos it's nothing
to do with css. Unfortunately you might even succeed here and there in
seeding uninformed prejudice against one the most legible sans
currently available for common use, cross-platform, on the web.
As a starter: http://en.wikipedia.org/wiki/Matthew_Carter
Peter H.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help needed, almost right
On 2010/06/27 16:57 (GMT+0200) Peter Hammarling composed: David, for someone whose contributions here are so consistently helpful and well-informed your crusade against Verdana is difficult to comprehend, and out of place on this list. Several times I've nearly risen to the bait of previous comments but held back 'cos it's nothing to do with css. Unfortunately you might even succeed here and there in seeding uninformed prejudice against one the most legible sans currently available for common use, cross-platform, on the web. As a starter: http://en.wikipedia.org/wiki/Matthew_Carter As finishers: http://www.xs4all.nl/~sbpoley/webmatters/verdana.html http://www.zeldman.com/2010/04/18/verdana-pro-and-con-2/ Quoting the latter (you do know who L. Jeffrey Zeldman is, right?): Verdana is a font that looks gorgeous at 11px in a non-antialiased environment, and handsome at 9px and 10px in that same setting. Make it any bigger than 11px, and it looks _grotesque_. Set it via ems or percentages rather than pixels—as most accessibility-conscious designers do—and you ding its perfection. View it in a sub-pixel antialiased environment (i.e. on a modern platform) and, if it is small enough and near enough to an exact pixel size, it still looks nice and reads well … but not nearly as nice or as well as it does in the environment for which it was originally created. (emphasis supplied) On my systems, 11px is never a legibly large enough size, so Verdana is never a good choice, unless grotesque mousetype is a goal, and attractiveness is not. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout help needed, almost right
Below is the test page I've been playing with. What I am trying to do is
* have a header block at the top of the page/screen
* have a footer block at the bottom of the page/screen
* have a menu side bar on the right with links that does not scroll with the
main content
* have the content block scrollable only
* keep it as simple as possible for repeated use
I am close, but I have a few problems that I need some pointers on.
* The footer div overlays on top of the scroll bar on the content area. I
couldn't get the pad3 or padding-right to work right.
* On my work safari browser the footer information is partially hidden
behind the right menu. On my personal mac (safari and opera) it appears fine.
* Only some of the internal links work. The top does not work, I have to
remove the # from the URL to get back to the starting point.
* I had to add multiple br to the bottom of the page to see the last of
the text hidden behind the footer.
* I had tried to get sizes set to 'em', but couldn't get them to work right
so have some 'px'. Any idea how to get to just one standard?
* and anything ya'll might find that I missed
Future Plans:
* figure a print CSS from all this
* ???
Thanks for any insight and help you can give. Sorry, I do not have a public
web site to host this test case on, my apologies for including such a long
example. Note, this is *NOT* for school work. I've not been in a classroom in
many years. Just a personal attempt to make something I like, without all the
extraneous junk most blog sites and other software include.
Eric
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html lang=en
head
meta
http-equiv=Content-Type
content=text/html;charset=utf-8
meta
name=robots
content=noindex, nofollow, noarchive, nosnippet, noodp, noimageindex,
noarchive
link
rel=icon
href=images/favicon.ico
type=image/vnd.microsoft.icon
title Some sort of title goes here /title
style type=text/css
html {
background : #FF -18px 0 no-repeat;
border : 0;
font-family : Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
font-size : 80%;
height : 100%;
margin : 0;
max-height : 100%;
overflow: hidden;
padding : 0;
}
body {
border : 0;
height : 100%;
margin : 0;
max-height : 100%;
overflow: hidden;
padding : 0;
}
div#content {
background-color: #FFF9DA;
display : block;
height : 100%;
margin-right: 12em;
margin-top : 5em;
max-height : 100%;
overflow: auto;
padding-bottom : 3em;
padding-left: 1em;
padding-right : 1em;
position: relative;
}
div#head {
background-color: #ECE097;
color : #FF6600;
display : block;
font-size : 4em;
height : 1.25em;
margin : 0;
position: fixed;
right : 0;
top : 0;
width : 100%;
z-index : 3;
}
div#foot {
background : #CC9966;
bottom : -1px;
color : #FF;
display : block;
font-size : 1em;
height : 3em;
left: 0;
margin : 0;
padding-right : 3em;
position: fixed;
text-align : right;
width : 100%;
z-index : 1;
}
div#right {
background-color: #CDDBFF;
background-position : 0 100px;
font-size : 1em;
height : 100%;
position: fixed;
right : 0;
width : 12em;
z-index : 2;
}
/* Not sure what this does for me, */
/* not the position, but the asterisks */
* html #head, * html #foot, * html #right {
position : absolute;
}
div#pad1, div#pad2, div#pad3 {
display : block;
}
/* To give some padding to the left heading text since I can't do
padding-left */
div#pad1 {
float : left;
height : 1.25em; /* same as header */
width : 18px;
}
/* Used to put space above right section */
div#pad2 {
height : 6em; /* same as header? */
}
/* Used to put space to the right of the footer */
div#pad3 {
float : right;
width : 13em; /* same as right */
}
/* make bolding a wee bit larger */
p.bold {
color : #0040A9;
font-size : 1.2em;
font-weight : bold;
}
/* block of text on left or right side,
Re: [css-d] Layout help needed, almost right
Eric Peterson wrote:
Below is the test page I've been playing with.
Let's start here (take it slow and wait for others on the list who will
offer good advice).
This:
html {
font-family : Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
font-size: 80%;
}
Becomes this [user friendly and shorter]:
html {
font : 100%/1.4 Helvetica, Arial, sans-serif;
}
This:
div#blockleft {
height : 200px;
}
div#blockright {
height : 200px;
}
Becomes this [the specificity of div#selector /may/ not be necessary,
and let content determine height]:
#blockleft {
/*height : 200px;*/
}
#blockright {
/*height : 200px;*/
}
Best,
~d
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout Basics: Floats, Position, Overflow
Hello,
I have a question involving the effect of the position and overflow
properties on floats. My example is a simple two-column layout. The left
column, called Main_Nav, is floated left and assigned a width (270px); the
right column, called Details, not floated nor assigned a width, is given a
left-margin equivalent to the width of the navigation column. In IE7 and
various versions of Firefox on PC this works to create a liquid layout in
which the Details column expands to fill the width of the browser unoccupied
by Main_Nav. Here are the CSS rules for these columns:
#Main_Nav
{
float: left;
width: 270px;
display: inline;
overflow: hidden;
}
#Details
{
margin: 0 0 0 270px;
position: relative;
overflow: hidden;
}
Here is an example of this layout:
http://maui.pedrera.com/Clients/codebase/cpr/
Now I realize there are things on this page not exactly kosher from a
standards-compliant perspective. We are using a table to provide a big easy
control for people to toggle the visibility of the Main_Nav column. But the
thing I wanted to ask about concerns the necessity of setting the position
and overflow properties on the Details column. This column needs to contain
.NET controls which render a variety of UI widgets such as draggable list
items and collapsible panels and whatnot. I discovered that unless I
applied the position and overflow properties as above the layout would break
in IE7 and IE8 when a user interacted with these widgets.
Although satisfied that the problem appears to have been fixed, I am curious
to know why this was necessary. I realize this involves some very basic
concepts. I would appreciate it if anyone could let me know whether there
is something incorrect about this layout.
Thanks,
John
John Gribben
Pedrera, Inc.
215 348 7446
john.grib...@pedrera.com
http://www.pedrera.com http://www.pedrera.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout recommendation ?
Could give it a try, yes. Can you please give an example ? thanks - Original Message - From: Tom Livingston tom...@gmail.com To: BobSharp bobsh...@ntlworld.com Sent: Tuesday, August 04, 2009 9:15 PM Subject: Re: [css-d] Layout recommendation ? Equal height columns is a tough one... Can you settle for fixed width and use the 'ole background-image-to-fake-the-equal-height-cols trick? On Tue, Aug 4, 2009 at 3:21 PM, BobSharpbobsh...@ntlworld.com wrote: Can anyone recommend a simple 3-column layout ? a.. 3 columns, equal height. b.. Fully cross-browser (except ie8) c.. Column priority = 2 - 1 - 3 (Search Engine Optimisation) d.. Side columns - fixed width. e.. Centre content - fluid width preferred, but if necessary, would settle for fixed width. f.. Header and Footer. g.. Header to have logo and horizontal multi-level drop-down menu (should not wrap when window narrowed). Currently experimenting with www.cssplay.co.uk/menu/pro_drop3.html Pages will be .php Have tried the simplified HolyGrail, but when colouring all the divisions, the columns don't appear to be equal height. -- I am using the free version of SPAMfighter. We are a community of 6 million users fighting spam. SPAMfighter has removed 13694 of my spam emails to date. Get the free SPAMfighter here: http://www.spamfighter.com/len The Professional version does not have this message __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- I am using the free version of SPAMfighter. We are a community of 6 million users fighting spam. SPAMfighter has removed 13694 of my spam emails to date. Get the free SPAMfighter here: http://www.spamfighter.com/len The Professional version does not have this message __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout recommendation ?
Could give it a try, yes. - Original Message - From: Tom Livingston tom...@gmail.com To: BobSharp bobsh...@ntlworld.com Sent: Tuesday, August 04, 2009 9:15 PM Subject: Re: [css-d] Layout recommendation ? Equal height columns is a tough one... Can you settle for fixed width and use the 'ole background-image-to-fake-the-equal-height-cols trick? On Tue, Aug 4, 2009 at 3:21 PM, BobSharpbobsh...@ntlworld.com wrote: Can anyone recommend a simple 3-column layout ? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- I am using the free version of SPAMfighter. We are a community of 6 million users fighting spam. SPAMfighter has removed 13694 of my spam emails to date. Get the free SPAMfighter here: http://www.spamfighter.com/len The Professional version does not have this message __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout recommendation ?
Can anyone recommend a simple 3-column layout ? a.. 3 columns, equal height. b.. Fully cross-browser (except ie8) c.. Column priority = 2 - 1 - 3 (Search Engine Optimisation) d.. Side columns - fixed width. e.. Centre content - fluid width preferred, but if necessary, would settle for fixed width. f.. Header and Footer. g.. Header to have logo and horizontal multi-level drop-down menu (should not wrap when window narrowed). Currently experimenting with www.cssplay.co.uk/menu/pro_drop3.html Pages will be .php Have tried the simplified HolyGrail, but when colouring all the divisions, the columns don't appear to be equal height. -- I am using the free version of SPAMfighter. We are a community of 6 million users fighting spam. SPAMfighter has removed 13694 of my spam emails to date. Get the free SPAMfighter here: http://www.spamfighter.com/len The Professional version does not have this message __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout still broken, new problems
hi kimi, IE6 e.g. does not recognize min-... (min-width). I think you designed on a fixed layout - so you can use simply width:780px in your body thats the first. If you got an Intel Mac I recommend to install virtualbox (www.virtualbox.org) and some windows environments for testing. otherwise you'll never see that what 80% others see :) ciaociao tina Von: Kim Brooks Wei kimi@kimbwei.com Datum: Tue, 17 Mar 2009 00:23:43 -0400 An: CSS-Discuss css-d@lists.css-discuss.org Betreff: [css-d] Layout still broken, new problems Hi there People, I got my site to look the way I wish it to on my own Mac in Safari and FF but the layout seems broken in other environments. A friend using IE and another using FF told me that my type sits on top of the tiger and can't be read. They are not seeing the layout the way I wish it to look. Look I want here http://thewei.com/sandbox/tw/test/ Look people are getting here http://thewei.com/sandbox/tw Help appreciated muchly. Cheers, Kimi -- This email sent by Kimi Wei 201-475-1854 | k...@thewei.com | thewei.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout still broken, new problems
I think there's something called bootcamp and parallels too (sorry about the spelling, but if you google, it will correct itself) that should work on all MAC's. Regards, -- Krystian - Sunlust Affordable Web Services in Eastbourne: http://eastbournewebdesign.net Mobile UK (Orange): 07528 036 337 Call for more information or email me. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout still broken, new problems
On Tuesday, March 17, 2009 12:23:43 am Kim Brooks Wei wrote: Hi there People, I got my site to look the way I wish it to on my own Mac in Safari and FF but the layout seems broken in other environments. A friend using IE and another using FF told me that my type sits on top of the tiger and can't be read. They are not seeing the layout the way I wish it to look. Look I want here http://thewei.com/sandbox/tw/test/ Look people are getting here http://thewei.com/sandbox/tw Help appreciated muchly. Cheers, Kimi Just for additional input, it looks right on Konqueror and Linux Firefox. although, if your viewport is too narrow, when you side scroll the page, the bottom two paragraphs have no background color and the text becomes illegible over the position:fixed tiger. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help in IE
Thanks so much!
I ended up pretty much doing a pseudo re-write and I loosely based it off
the yui grid layout
http://developer.yahoo.com/yui/grids/
As far as I can tell it is now working in (most) all browsers.
If anyone sees any glaring mistakes, please let me know. (css) design is
not my strongest suit and I'm still focusing on features, so any pointers
would be welcome. Eventually I'll probably contract out for a more
professional design, but that will be once I get the base featureset a
little further along.
-Jonathon
On Wed, Feb 4, 2009 at 4:47 PM, Gunlaug Sørtun gunla...@c2i.net wrote:
Jonathon Suggs wrote:
I'm needing some help with my layout in IE (common request, I know).
It is fine in FF, Opera (min), etc but sometimes has large gaps in IE6/7.
http://www.murmp.com
The addition of...
#sidebar {position: relative;}
...seems to stabilize that part in IE6.
You have a 'min-width' on #main that acts as a 'hasLayout' trigger in
IE7 and causes #main to drop on narrow windows. If you don't want that
drop you should remove 'min-width' from that element.
regards
Georg
--
http://www.gunlaug.no
--
http://www.murmp.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout help in IE
Hi, I'm needing some help with my layout in IE (common request, I know). It is fine in FF, Opera (min), etc but sometimes has large gaps in IE6/7. http://www.murmp.com I'm about to do a minor redesign, but the general structure is going to (hopefully) stay the same unless it just needs major rework to accommodate IE. In a related question, any tools similar to Firebug available for IE? -- http://www.murmp.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help in IE
On Wed, 4 Feb 2009 11:28:58 -0600, Jonathon Suggs wrote: [...] In a related question, any tools similar to Firebug available for IE? I find these useful: IE Debug Bar: http://www.debugbar.com/?langage=en RNIB Surf Right Toolbar http://www.rnib.org.uk/xpedio/groups/public/documents/PublicWebsite/public_srthelp.hcsp Slayer Office Favelet Suite http://slayeroffice.com/?c=/content/tools/suite.html Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout-problem
2009/1/9 Holly Bergevin ho...@communitymx.com: From: Ib Jensen ibkjen...@gmail.com Link : url: http://ikjensen.dk/test/ Second problem. The menu in the left sidebar works ok on the Index-page, but not on a second page. Menu : Genealogy - Kings of Denmark Can you explain what you mean when you say it doesn't work? I see hover effects, and if you click on a menu item, the page responds (by taking you to a non-existent page). I just checked the page. From the Index-page to the Page : Kings of Denmark Top-nav : Genealogy - Kings of Denmark, the only working link on the index-page, besides the Link menu-entry. On the Kings of Denmark-page, I've got a menu on the right side, The purble one, i've have some bullets on the left side, which don't show up on the left menu. At least in my FF3. The only working link on this page is : Home If this is what you mean by not working, then the problem is in your HTML with the paths for the links. On the index page, they go back up a level (out of the test folder), but on the second page, they don't make it out of the test folder, so the browser shows a page not found. I can't explain it better, as when I'm looking at it, it shows some problem with the menu. -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout-problem
Hi, it's me again ;-) Link : url: http://ikjensen.dk/test/ Having a major problem with this layout. Strangely, In IE 6, it shows almost as I wanted it to look like. In FF2, it doesn't. Second problem. The menu in the left sidebar works ok on the Index-page, but not on a second page. Menu : Genealogy - Kings of Denmark Same Structure and css. All tested locally. PS! Don't care about the colors. -- Regards / Mhv. Ib K. jensen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout-problem
Ib Jensen wrote:
Link : url: http://ikjensen.dk/test/
Strangely, In IE 6, it shows almost as I wanted it to look like.
In FF2, it doesn't.
The menu in the left sidebar works ok on the Index-page, but not on a
second page.
This may help compliant browsers...
Name of the game: Code to Opera -- FF, Safari, and Camino will follow
suit. Fix IE.
#container {padding-top: 1px;}-- fix 4 collapsing margins
.head h1{font-size:250%; margin: 40px 0 10px 0;padding: 0;
color:#fff;font-weight:normal;}
.head h2{font-size:180%; margin:0;color:#fff;font-weight:normal;}
.head {min-height: 150px;}
* html .head {height: 150px;}-- 4 IE/6
div.note {background:fuchsia/*4 position only*/; overflow: hidden;}
Could not find menu second page.
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout-problem
2009/1/8 David Laakso da...@chelseacreekstudio.com:
Ib Jensen wrote:
Name of the game: Code to Opera -- FF, Safari, and Camino will follow
suit. Fix IE.
#container {padding-top: 1px;}-- fix 4 collapsing margins
.head h1{font-size:250%; margin: 40px 0 10px 0;padding: 0;
color:#fff;font-weight:normal;}
.head h2{font-size:180%; margin:0;color:#fff;font-weight:normal;}
.head {min-height: 150px;}
* html .head {height: 150px;}-- 4 IE/6
div.note {background:fuchsia/*4 position only*/; overflow: hidden;}
I'll try this
Could not find menu second page.
Try in the Top-menu-bar = first menu-point = Genealogy, Menu-point =
Kings of Denmark.
On this page : The menu in the right side.
--
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout-problem
Ib Jensen wrote: 2009/1/8 David Laakso da...@chelseacreekstudio.com: Could not find menu second page. Try in the Top-menu-bar = first menu-point = Genealogy, Menu-point = Kings of Denmark. On this page : The menu in the right side. re: http://ikjensen.dk/test/ Dunno. Can't help. Need pro. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout-problem
From: Ib Jensen ibkjen...@gmail.com Link : url: http://ikjensen.dk/test/ Second problem. The menu in the left sidebar works ok on the Index-page, but not on a second page. Menu : Genealogy - Kings of Denmark Can you explain what you mean when you say it doesn't work? I see hover effects, and if you click on a menu item, the page responds (by taking you to a non-existent page). If this is what you mean by not working, then the problem is in your HTML with the paths for the links. On the index page, they go back up a level (out of the test folder), but on the second page, they don't make it out of the test folder, so the browser shows a page not found. ~holly __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help
Morning all, I tried what David has suggested and its still letting the page stretch way out. Any ideas? Also one of my pages has a back line on it and for the life of me I can't figure out where its coming from and its in every browser except IE. Thanks, Tim Main: http://dev.howsmykiddriving.org Page with line: http://dev.howsmykiddriving.org/aboutus.php Then assign a min-width and max-width to that id. IE/6 does not support min/max. There are a number of workarounds, including ie-expessions and min/max javascript (Google for same). BTW, I got a 404 on the About page. Don't forget to validate the html and css. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help
Tim Wolak wrote:
Morning all,
I tried what David has suggested and its still letting the page
stretch way out. Any ideas? Also one of my pages has a back line on
it and for the life of me I can't figure out where its coming from and
its in every browser except IE.
Thanks,
Tim
Main: http://dev.howsmykiddriving.org
Page with line: http://dev.howsmykiddriving.org/aboutus.php
Then assign a min-width and max-width to that id. IE/6 does not
support min/max. There are a number of workarounds, including
ie-expessions and min/max javascript (Google for same).
BTW, I got a 404 on the About page. Don't forget to validate the
html and css.
In your CSS file you wrote:
pagewrap {
min-width: 680px;
max-width: 900px;
}
Change it to:
#pagewrap {
min-width: 680px;
max-width: 900px;
}
And adjust the widths of the content to meet expectation without content
cross-over overlap at 680 and 900.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help
Tim Wolak wrote:
Morning all,
Also one of my pages has a back line on it and for the life of me I
can't figure out where its coming from and its in every browser except IE.
Thanks,
Tim
http://dev.howsmykiddriving.org
Page with line: http://dev.howsmykiddriving.org/aboutus.php
I think it may be a collapsing-margin [1] issue (if so, IE is saved by
its own stupid stupidity).
Try:
#wrapper {
border: 1px solid fuchsia; :: 4 position only (delete it)
padding-top:1px; -- :: add this
background:url(/images/bgsmall_03.jpg);
background-repeat:repeat;
position:relative;
}
[1] http://www.w3.org/TR/CSS21/box.html#collapsing-margins
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout help
Morning all, I am fairly new to css and am having some design issues and could use some help. I have most of my main content within a wrapper and have a header and a footer. The main content slides all over the place as the window is re sized, is there a better way of going about this so if a user has a big monitor there is not a lot of space in the middle of the page? Also on my about us page I have the black line below the menu bar not sure what the cause of this is Thanks in advance! Tim Main page: http://howsmykiddriving.org/dev About us: http://howsmykiddriving.org/dev/aboutus.php __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help
Tim Wolak wrote: Morning all, I am fairly new to css and am having some design issues and could use some help. I have most of my main content within a wrapper and have a header and a footer. The main content slides all over the place as the window is re sized, is there a better way of going about this so if a user has a big monitor there is not a lot of space in the middle of the page? Also on my about us page I have the black line below the menu bar not sure what the cause of this is Thanks in advance! Tim Main page: http://howsmykiddriving.org/dev About us: http://howsmykiddriving.org/dev/aboutus.php You could assign a first to open last to close id-- enclosing everything you have within it. body div id=whatever ... /div /body /html Then assign a min-width and max-width to that id. IE/6 does not support min/max. There are a number of workarounds, including ie-expessions and min/max javascript (Google for same). BTW, I got a 404 on the About page. Don't forget to validate the html and css. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout jumps around
Greetings! I have a minor but irritating problem. I am prototyping a site that uses a graphic navbar at the top. The buttons work, but some of the buttons (classes and seminar) cause the entire layout to jump about 10 px to the right when clicked. This only happens in Safari and Opera on the Mac. Firefox on Mac and WIN and IE 6 7 on WIN have no problem, as far as I can tell. In WIN IE 5 on the MAC, the nav buttons don't show up at all. I haven't checked it in WIN IE 5. All these buttons have uniform CSS in the external stylesheet, so they shouldn't jump around like this. I have combed through the HTML in classes.html and seminar.html (the problem files) but can't find anything strange or wrong. The CSS validates and the five HTML files do as well. I am at a loss to figure this out. Here are the URLs: http://www.boletta.com/bolestyle/ http://www.boletta.com/bolestyle/bolestyle.css Any help appreciated. Bill Boletta __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout jumps around
wlb wrote: I am prototyping a site that uses a graphic navbar at the top. The buttons work, but some of the buttons (classes and seminar) cause the entire layout to jump about 10 px to the right when clicked. This only happens in Safari and Opera on the Mac. Firefox on Mac and WIN and IE 6 7 on WIN have no problem, as far as I can tell. http://www.boletta.com/bolestyle/ Vertical scrollbar comes and goes, which causes jumping. It isn't limited to the browsers you mention, as I get that jumping in all non-IE browsers on any OS. Make pages taller than the browser-window - min-height: 100% + 1px or something, or style for a permanent vertical scrollbar in other ways. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout jumps around
wlb wrote: Greetings! I have a minor but irritating problem. http://www.boletta.com/bolestyle/ Bill Boletta See page shift: http://www.communitymx.com/content/article.cfm?cid=528A0 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout problems with bkgrd color, footer position, left nav, etc.
Kathy Davie wrote: I am having myriad issues with this css, http://kddidit.com/CSS/stylesAMTF.css when its applied to this page, http://kddidit.com/AMTF/ audioList.html. I recently had to reload the Leopard OS in my computer and this is when I started having these issues. Let the software do its little thing unrestrained, and your stuff will do its little thing-- whether your stuff will ascend is another matter... Cursory checked in IE/6. IE/7, and some compliant browsers. http://www.chelseacreekstudio.com/ca/cssd/test-56.html HTH -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout problems with bkgrd color, footer position, left nav, etc.
I am having myriad issues with this css, http://kddidit.com/CSS/stylesAMTF.css when its applied to this page, http://kddidit.com/AMTF/ audioList.html. I recently had to reload the Leopard OS in my computer and this is when I started having these issues. 1. Although I have set a background color in #container, it doesn't show 2. My #footer appears at the top of the page 3. The #navLeft doesn't show up at all---partly because it's white a:links against the non-existent royal blue background 4. Can't get my #navTop to react to any css code so I can get it to center vertically inside the royal blue horizontal bar 5. I would dearly love to get my entire website to center horizontally within a viewport. I've tried the bit on creating the #horizontal #vertical code. So far, the only way I can get it to work is to insert center on the outside of my .wrapper div tags. I know, it does work, but it feels like a cheat... 6. The right column alt tag text shows up 7. My #content is shoved all the way over to the left in spite of having a margin-left of 155px and it's shoved way down the page when it should be JUST below the navTop __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout problems with bkgrd color, footer position, left nav, etc.
Kathy Davie wrote: I am having myriad issues with this css, http://kddidit.com/CSS/stylesAMTF.css http://kddidit.com/AMTF/audioList.html. Do you really mean font-size : 16em; on all those elements? That value blows the entire page across a few dozen screens all by itself since it gets multiplied by 16 I don't know how many times down the chain, so start by deleting that and replace it with something more reasonable, like font-size: 100%;. Also: go through the HTML validator's list of error, and fix the source-code. Otherwise you'll never solve your problems for real. http://validator.w3.org/check?uri=http%3A%2F%2Fkddidit.com%2FAMTF%2FaudioList.htmlcharset=%28detect+automatically%29doctype=Inliness=1group=0user-agent=W3C_Validator%2F1.591 regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout problems in Internet explorer
Hi,
I have a problem with a table which breaks the layout in IE6/7.
I have partially solved the problem in Firefox declaring body{float:left} so
that a floating object can contain all other floating objects.
Not so in Ie.
The only way to have the same result in IE was the following declaration:
#involucro{
position:absolute;--
width:auto;--
--
}
In this case the table is contained inside the layout (when it is large the
scrollbars appear) but if I declare width: auto all the layout divs don't
enlarge to the layout dimensions as you can see here
http://www.fedegrafia.com/forum/cdl/table.htm
thanks in advance for help
Fede Benvenuto
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] layout robustness
Using negative margins and fluid layout in a CMS template and just wondering how others handle robustness issues. If one of the authors places a large image in content which looks good on their browser, but it is to big for 800x600 how do you handle the overflow. At present if i use overflow: hidden; the content div text above and below the image gets hidden as well; if i use overflow: none; the content div steps behind the sidemenu div. Education is my main answer, but is there a general css solution? -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout robustness
Michael Adams wrote: Using negative margins and fluid layout in a CMS template and just wondering how others handle robustness issues. If one of the authors places a large image in content which looks good on their browser, but it is to big for 800x600 how do you handle the overflow. I suppose the obvious is that you can't cram 5lbs of apples in a 3lb bag. CMS authors need to be aware of layout limitation regardless of the layout structure that has been employed. The width of the any image, or fixed width element, needs to be less wide than the column it is placed in when the browser is at 800. Tight tolerance is good to avoid. IE6 and down need even /more/ horizontal playroom or the float will drop. A user with a sidebar in use complicates matters. Setting min/max with the min-width at less than enough to clear the scroll bar at 800t helps (you'll need a min/max workaround for IE/6). There are a couple of ways to handle too wide images in narrow windows but I am not sure how well this will work for you in IE, particularly when the width and height of the image is unknown. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout robustness
David Laakso wrote: Michael Adams wrote: Using negative margins and fluid layout in a CMS template and just wondering how others handle robustness issues. If one of the authors places a large image in content which looks good on their browser, but it is to big for 800x600 how do you handle the overflow. I suppose the obvious is that you can't cram 5lbs of apples in a 3lb bag. CMS authors need to be aware of layout limitation regardless of the layout structure that has been employed. The width of the any image, or fixed width element, needs to be less wide than the column it is placed in when the browser is at 800. Tight tolerance is good to avoid. IE6 and down need even /more/ horizontal playroom or the float will drop. A user with a sidebar in use complicates matters. Setting min/max with the min-width at less than enough to clear the scroll bar at 800t helps (you'll need a min/max workaround for IE/6). There are a couple of ways to handle too wide images in narrow windows but I am not sure how well this will work for you in IE, particularly when the width and height of the image is unknown. A good way to deal with this in a CMS system is to build a routine into the processing that resizes images to fit. Actually, it might not be a bad idea to build into a CMS a routine that vets any code input by content creators and cleans out what you don't want. The editor in my employer's ECM system does that. -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout robustness
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Michael Adams Sent: Saturday, August 09, 2008 12:28 PM To: css-d@lists.css-discuss.org Subject: [css-d] layout robustness Using negative margins and fluid layout in a CMS template and just wondering how others handle robustness issues. If one of the authors places a large image in content which looks good on their browser, but it is to big for 800x600 how do you handle the overflow. You could use CSS to set a max-width on the image. Another approach that we used for a specific app is to burn rather large images and then set their width in percentage. That way the width of the parent container is never an issue. -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout robustness
On Sat, 09 Aug 2008 17:34:48 -0400 David Laakso wrote: Michael Adams wrote: Using negative margins and fluid layout in a CMS template and just wondering how others handle robustness issues. If one of the authors places a large image in content which looks good on their browser, but it is to big for 800x600 how do you handle the overflow. I suppose the obvious is that you can't cram 5lbs of apples in a 3lb bag. CMS authors need to be aware of layout limitation regardless of the layout structure that has been employed. The width of the any image, or fixed width element, needs to be less wide than the column it is placed in when the browser is at 800. Tight tolerance is good to avoid. IE6 and down need even /more/ horizontal playroom or the float will drop. A user with a sidebar in use complicates matters. Setting min/max with the min-width at less than enough to clear the scroll bar at 800t helps (you'll need a min/max workaround for IE/6). There are a couple of ways to handle too wide images in narrow windows but I am not sure how well this will work for you in IE, particularly when the width and height of the image is unknown. For IE7 i cheated with fixed width (remembering the words on the cover of Mike Oldfields Tubular Bells album). OT - As for authors, one assured me she was already a CMS site manager with lots of experience, so i promoted her, she then promptly loaded two 24bit 470x350px bmp images onto the homepage content at 350kB+ each. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout robustness
On Sat, 09 Aug 2008 17:26:34 -0700 Thierry Koblentz wrote: -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Michael Adams Sent: Saturday, August 09, 2008 12:28 PM To: css-d@lists.css-discuss.org Subject: [css-d] layout robustness Using negative margins and fluid layout in a CMS template and just wondering how others handle robustness issues. If one of the authors places a large image in content which looks good on their browser, but it is to big for 800x600 how do you handle the overflow. You could use CSS to set a max-width on the image. Another approach that we used for a specific app is to burn rather large images and then set their width in percentage. That way the width of the parent container is never an issue. Both are valid approaches but both risk huge image download times on dial-up unless i hack the CMS to use imageMagick or similar to resize on upload. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] layout robustness
For IE7 i cheated with fixed width (remembering the words on the cover of Mike Oldfields Tubular Bells album). OT - As for authors, one assured me she was already a CMS site manager with lots of experience, so i promoted her, she then promptly loaded two 24bit 470x350px bmp images onto the homepage content at 350kB+ each. Do what you wish with what you got. In my neighborhood, it's just another Family Affair. http://www.youtube.com/watch?v=uh1tsN1KmJA Yours, Mary -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout problem in IE6
URL: http://rsdesignandprint.com/5619lakeforrest/index.html CSS: http://rsdesignandprint.com/5619lakeforrest/index.css The site looks great in every browser except IE6. I figure it's just reading the padding or margins differently than the other browsers. I really don't want to change those attributes to please IE6; is there a fix for it that will make it read it better? Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout problem in IE6
Daniel Hammond wrote:
URL: http://rsdesignandprint.com/5619lakeforrest/index.html
The site looks great in every browser except IE6. I figure it's just
reading the padding or margins differently than the other browsers.
Yes, it does - on floats. It is known as the margin-doubling on floats
bug in IE6 and older versions.
To kill that bug, add...
a#nav_btn_2:link, a#nav_btn_2:visited {
display: inline;
}
...which of course doesn't make sense, and has no effect on 'display'
since a float will always be 'display: block'.
See: http://www.positioniseverything.net/explorer/doubled-margin.html
for bug-details.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
Tim Offenstein wrote: Recommend using strong as opposed to b in the interest of semantic markup. There are plans to deprecate the i and b tags because they're not semantic, they're presentational. FWIW: b and i are not deprecated in existing markup languages, and there are no such plans on the table for the next... http://www.w3.org/TR/html5/#the-b ...a b is (as of now) defined as a pre-styled span, and is as such semantically neutral. b can not be automatically interchanged with strong, unless strong carries the correct weight for the content in the first place. Similar with i and em - they have only default styles (in most browsers) in common. We can style b, i, em and strong as we choose, and no software in general use today will pay much, if any, attention to their semantic value or lack of same. That may of course change in the future - as for anything else, so it certainly doesn't hurt to apply the semantically most correct element for each case - which may happen to justify the use of b and i in lack of better options. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
Luc wrote: Avoiding spam isn't possible indeed. But as i said to try limit a bit of spam attack. Maybe using an image with the e-maildress instead of a clicking link Anyway, i'm sorry if i waisted your time David. You did not waste my time. And I appreciate your comment. I just do not have time to respond properly to why I do not think setting text in an image, including doing so to avoid spam, is a good idea. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
Good evening David, It was foretold that on 09/03/2008 @ 12:55:21 GMT-0400 (which was 13:55:21 where I live) David Laakso would write: You did not waste my time. And I appreciate your comment. I just do not have time to respond properly to why I do not think setting text in an image, including doing so to avoid spam, is a good idea. Oh, no prob David -- Best regards, Luc _ http://www.dzinelabs.com Powered by The Bat! version 3.99.29 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. Do you know why God withheld the sense of humour from women? That we may love you instead of laughing at you. - Mrs. Patrick Campbell (1865-1940) - British actress __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
David Laakso wrote: Luc wrote: David , just a quick remark: wouldn't it be better to use another alternative for the e-mail? Just to try to limit a bit of spam attack... off-list reply *** I am not sure what a spam attack has to do with the nature and purpose of the CSS-D list. My understanding is this list deals with the practical application of CSS. Well, let's try to bring it back in topic. What I've done is to add some del elements with no-spam legends, hiding them later on with CSS (and using JS to make it an actual link). This may not be the best approach, but it's, like everything else, just another try to avoid/minimize spam. Rafael. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
Rafael wrote: Well, let's try to bring it back in topic. What I've done is to add some del elements with no-spam legends, hiding them later on with CSS (and using JS to make it an actual link). This may not be the best approach, but it's, like everything else, just another try to avoid/minimize spam. Rafael. Interesting. Got a live example. ~dL PS I neither attempt to avoid or minimize span. It is a given that approximately 85 percent of my mail is spam: my e-mail client (TB), with minimal training, eats it -- no coding or scripting required. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
David Laakso wrote: Rafael wrote: Well, let's try to bring it back in topic. What I've done is to add some del elements with no-spam legends, hiding them later on with CSS (and using JS to make it an actual link). This may not be the best approach, but it's, like everything else, just another try to avoid/minimize spam. Rafael. Interesting. Got a live example. Well, my domain is down at the moment, but you'll find a raw example at http://void.99k.org/email.html There you'll see 4 different versions depending how you view it: with JS and CSS enabled, only JS or CSS enabled, and both disabled. ~dL PS I neither attempt to avoid or minimize span. It is a given that approximately 85 percent of my mail is spam: my e-mail client (TB), with minimal training, eats it -- no coding or scripting required. I guess you're already at the acceptance phase, I'm still fighting back. By the way, I recommend you not to tell that to any potential client you may have ---I, for one, may decide to look somewhere else. Rafael. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] :: layout check :: ~dL
I'd appreciate any comments and suggestions on this 6 page comprehensive layout for an industrial site. The marketing target is the IE browsers. Mac/IE5.2 gets it right. /Known Issue:/ 147.69 second download on a 56K modem (the images will be optimized in the production version). http://www.chelseacreekstudio.com/ca/mentor/ Thanks, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
On Sat, Mar 8, 2008 at 3:58 PM, David Laakso [EMAIL PROTECTED] wrote: I'd appreciate any comments and suggestions on this 6 page comprehensive layout for an industrial site. The marketing target is the IE browsers. Mac/IE5.2 gets it right. /Known Issue:/ 147.69 second download on a 56K modem (the images will be optimized in the production version). Here's a little bit of feedback. * I think it's nice to show so many photos, but more supporting text is needed. * Also, with so many photos on the pages, shouldn't there be some in the rather large banner? * Even if you're making the page 968px wide, the banner might be made to look ok even with an 800px width, or not? * The 3px double bottom-border for the headings doesn't work for me. See you Stephan http://www.chelseacreekstudio.com/ca/mentor/ Thanks, ~dL -- Stephan Wehner - http://stephan.sugarmotor.org - http://www.thrackle.org - http://www.buckmaster.ca - http://www.trafficlife.com - http://stephansmap.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of David Laakso Sent: Saturday, March 08, 2008 3:58 PM To: css discuss Subject: [css-d] :: layout check :: ~dL I'd appreciate any comments and suggestions on this 6 page comprehensive layout for an industrial site. The marketing target is the IE browsers. Mac/IE5.2 gets it right. /Known Issue:/ 147.69 second download on a 56K modem (the images will be optimized in the production version). http://www.chelseacreekstudio.com/ca/mentor/ Hi David, It looks nice and seems pretty robust. I think the 6th row of the table is missing a last cell. Also, I think you could do a better use of the summary attribute, maybe by using something like: This table charts our Distributors and Dealers along with their address, city, state, contact and phone numbers. One thing I noticed (and I was surprised by this since you have a link to Lynx in the footer) is that the site is difficult to navigate via the keyboard. I'm not a fan of menus at the end of the source code and I believe when it is done, authors SHOULD provide skip links. Also, because these links have no padding nor special styling (:focus/:active), it is hard to see when they are reached. HTH, -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
Hello David, It was foretold that on 08/03/2008 @ 18:58:15 GMT-0500 (which was 20:58:15 where I live) David Laakso would write: snipped a bit I'd appreciate any comments and suggestions on this 6 page comprehensive layout for an industrial site. The marketing target is the IE browsers. David , just a quick remark: wouldn't it be better to use another alternative for the e-mail? Just to try to limit a bit of spam attack... -- Best regards, Luc _ http://www.dzinelabs.com Powered by The Bat! version 3.99.29 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. Flattery makes friends and truth makes enemiesYiddish proverb __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
Thierry Koblentz wrote: http://www.chelseacreekstudio.com/ca/mentor/ I think the 6th row of the table is missing a last cell. Also, I think you could do a better use of the summary attribute, maybe by using something like: This table charts our Distributors and Dealers along with their address, city, state, contact and phone numbers. Both above, are good solid calls, and corrected to the host/server. One thing I noticed (and I was surprised by this since you have a link to Lynx in the footer) is that the site is difficult to navigate via the keyboard. HTH, I agree, keyboard navigation is important. We'll see if the owner agrees. If not, keyboard navigation, will be on me. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
Luc wrote: Hello David, It was foretold that on 08/03/2008 @ 18:58:15 GMT-0500 (which was 20:58:15 where I live) David Laakso would write: snipped a bit I'd appreciate any comments and suggestions on this 6 page comprehensive layout for an industrial site. The marketing target is the IE browsers. David , just a quick remark: wouldn't it be better to use another alternative for the e-mail? Just to try to limit a bit of spam attack... off-list reply *** I am not sure what a spam attack has to do with the nature and purpose of the CSS-D list. My understanding is this list deals with the practical application of CSS. As an off-topic aside, your comment regarding spam /is/ forwarded to the site owner. My own opinion is that there is no way to avoid spam. There are means available with open source e-mail clients to filter it. This seems to me to be the best approach until something better comes along. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
At 10:36 PM -0500 3/8/08, David Laakso wrote: Thierry Koblentz wrote: http://www.chelseacreekstudio.com/ca/mentor/ One thing I noticed (and I was surprised by this since you have a link to Lynx in the footer) is that the site is difficult to navigate via the keyboard. HTH, Hi David, A lot of screen reader users will navigate via header markup. If you put a header tag immediately prior to the UL it will allow them to go right to the navigation. The pages should also have a language declaration. Recommend using strong as opposed to b in the interest of semantic markup. There are plans to deprecate the i and b tags because they're not semantic, they're presentational. Best regards, -Tim -- Tim Offenstein *** Campus Accessibility Liaison *** (217) 244-2700 CITES Departmental Services *** www.uiuc.edu/goto/offenstein __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: layout check :: ~dL
Thanks to all who have taken time to review the layout. The owner of the site and I will consider all of the comments and suggestions presented-- even those having nothing to do with the mission or purpose of this list: the practical discussion of CSS and its use. ~dL I'd appreciate any comments and suggestions on this 6 page comprehensive layout for an industrial site. The marketing target is the IE browsers. Mac/IE5.2 gets it right. /Known Issue:/ 147.69 second download on a 56K modem (the images will be optimized in the production version). http://www.chelseacreekstudio.com/ca/mentor/ Thanks, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
On Dec 22, 2007 6:26 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Either you had a margin-top in there, or the software you got that outline from is broken beyond repair. A more direct approach... http://www.gunlaug.no/tos/alien/jer-1/test_07_1222.html http://www.gunlaug.no/tos/alien/jer-1/test_07_1222-b.html ...shows clearly how the floats line up. You are completely right. Apparently the FF web developer toolbar renders the boundaries wrong. When using a custom background color you can see it works. As you can see, the line-height is a fixed 12px - inherited from #details-container, so with a font-size of 20px the text overshoots its own line and indeed the entire float. Good point, fixed that to. Everything is working as expected now, thanks. I did however stumble upon something else (for another part of the webpage); It seems when you have a container and floats inside them, the container does not stretch to the size of the floats. Is there a way to overcome that problem without specifying the sizes explicitly? Sample code: http://test.intellit.nl/floats.html. Thanks again! -- Jeroen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
Jeroen wrote: http://test.intellit.nl/test.html. How does the aligning of the floats work? Floats go as high as they can, but not higher - unless you pull them up. So, floats always align vertically with their top edge or margin in line with whatever element they line up against. With 2 floats side by side, their top edges/margins should be at the same vertical line. Text-alignment in any one of those floats has no relations to text in the other float or other elements, and will only be affected by whatever font-size, line-height etc that's declared on itself and its own float. No problem getting whatever text line-up you want - static or dynamically, but it won't work well as long as you apply absolute units for font-size, line-height and vertical paddings and/or margins. Reliable vertical alignment of a float based on the size of its text-content - a kind of baseline alignment, requires well-calculated use of relative units. I use such vertical alignment for the floating section-headlines throughout my entire site, aligning the headline-text with the top edge of the container the floating headline is pulled up from. Works regardless of font-resizing and other variables, and is only disturbed slightly by differences in how browsers map relative units to actual screen-pixels. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
Jeroen wrote: It seems when you have a container and floats inside them, the container does not stretch to the size of the floats. Is there a way to overcome that problem without specifying the sizes explicitly? Sample code: http://test.intellit.nl/floats.html. Sure. It's the old expand to contain floats problem, for which there are a multitude of methods and variants. I think the simplest and safest method for your case, is easyclearing... http://www.gunlaug.no/tos/alien/jer-1/test_07_1223.html ...with a minor bug fix for IE/win - just for your case. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
Jeroen wrote: http://test.intellit.nl/align1.png the right float has 10px smaller font size. http://test.intellit.nl/align2.png the right float has same font size as left. Any clues? Either you had a margin-top in there, or the software you got that outline from is broken beyond repair. A more direct approach... http://www.gunlaug.no/tos/alien/jer-1/test_07_1222.html http://www.gunlaug.no/tos/alien/jer-1/test_07_1222-b.html ...shows clearly how the floats line up. As you can see, the line-height is a fixed 12px - inherited from #details-container, so with a font-size of 20px the text overshoots its own line and indeed the entire float. According to the first part it should always align on the top. So I'm a bit confused. If you want the text to line up regardless of font-size, you have to adjust the position of the float itself depending on the *line-height*. With a fixed line-height you can only achieve a static adjustment, which will give end-users a whole range of problems if they resize text. You can of course also declare a top padding on the float and push small text down until it lines up where you want, but that is an even more limited and static solution since it has to work in reverse and you can't subtract padding based on font-size. You have to let go of those fixed font-sizes and line-heights if you want anything but a static - print - solution. A static solution will break under stress anyway. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
I did however stumble upon something else (for another part of the webpage); It seems when you have a container and floats inside them, the container does not stretch to the size of the floats. Is there a way to overcome that problem without specifying the sizes explicitly? Sample code: http://test.intellit.nl/floats.html. That may help: http://tjkdesign.com/articles/block-formatting_context/newBFC.asp -- Regards, Thierry | http://www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
On Dec 22, 2007 4:42 AM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Yes, you have added 10px padding to all sides of a 100% wide #title-date. That makes it 100%+20px wide in standard mode. Also: IE6/7 can't make up their mind about the container-width with a scrollbar, and IE6 can't calculate percentage-width properly anywhere. That explains a lot, I must have overlooked it after staring 4 hours :) Another question is; I want to have the Title and other text on the right on the same line. I can't get it to float correctly. I want to separate it in two different columns, one 70%, other 30% of max - width. You didn't float them at all, and the width is missing on Title and is 100%+20px on the other. I tried it before but didn't get it to work. Probably mixed it up later on. I see you added a width of 510px to the details container, the problem is I don't know the size beforehand, it changes with every photo. The pblog software I use only gives out the width of the photo (533px) in this case. Is there a way to do it with percentages / relative? I can hack it in with javascript easily, but this will cripple it when JS is disabled. Thanks all for your time again. -- Jeroen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
Jeroen wrote:
I see you added a width of 510px to the details container, the problem is
I don't know the size beforehand, it changes with every photo. The pblog
software I use only gives out the width of the photo (533px) in this case.
Is there a way to do it with percentages / relative? I can hack it in with
javascript easily, but this will cripple it when JS is disabled.
Reducing styling of details to a minimum and include a 'hasLayout'
trigger, will work reasonably well...
#details {
padding:10px;
height: 1%;
}
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
On Dec 22, 2007, at 9:43 AM, Jeroen wrote: I''m working on a design for a photo blog, and stumbled upon an overflow issue for which I can't find the cause. I copied all relevant code to a test file: URL: http://test.intellit.nl/test.html [...] HTML css is valid (CSS partly because of opacity stuff for IE/mozilla failing;) On Sat, 22 Dec 2007 12:21:24 +0900, Philippe Wittenbergh responded, in part: You can safely drop the '-moz-opacity'. Gecko browsers support the 'opacity' property since at least Firefox 1.0, if not earlier. FWIW - opacity works in Netscape 7.2 here (Win xp). Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
On Dec 22, 2007 11:48 AM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Jeroen wrote:
I see you added a width of 510px to the details container, the problem is
I don't know the size beforehand, it changes with every photo. The pblog
software I use only gives out the width of the photo (533px) in this case.
Is there a way to do it with percentages / relative? I can hack it in with
javascript easily, but this will cripple it when JS is disabled.
Reducing styling of details to a minimum and include a 'hasLayout'
trigger, will work reasonably well...
#details {
padding:10px;
height: 1%;
}
Thanks that works like a charm. See: http://test.intellit.nl/test.html.
How does the aligning of the floats work? When they both have the same
font-size,
they align perfectly. The top and bottom are aligned the same. (I'm
using outline-blocklevel
elements in the webdeveloper toolbar).
When I change the font size (like in the URL) for some reason the
smallest float goes down
a bit; it doesn't align at the top. I expected the bottom not the be
at the same height, but not
the top. Why does it work that way?
--
Jeroen
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
On Dec 22, 2007 2:59 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Jeroen wrote:
http://test.intellit.nl/test.html.
How does the aligning of the floats work?
Floats go as high as they can, but not higher - unless you pull them up.
So, floats always align vertically with their top edge or margin in line
with whatever element they line up against.
With 2 floats side by side, their top edges/margins should be at the
same vertical line.
First of all, thanks again for taking the time to teach me (and others).
Very much appreciated.
But with the above, That was actually what I would have expected however
in reality it doesn't seem to work. See this screen shots:
http://test.intellit.nl/align1.png the right float has 10px smaller font size.
http://test.intellit.nl/align2.png the right float has same font size as left.
Any clues?
#details {
padding:10px;
height: 1%; /* hasLayout */
}
#title-heading { /* Left float */
text-align: right;
color: black;
float: left;
width: 50%;
font-size: 20px;
font-weight: normal;
padding-bottom: 10px;
}
#title-date { /* Right float */
text-align: left;
color: #666;
float: left;
width: 50%;
font-size: 20px;
font-weight: normal;
padding-bottom: 10px;
}
Text-alignment in any one of those floats has no relations to text in
the other float or other elements, and will only be affected by whatever
font-size, line-height etc that's declared on itself and its own float.
Exactly what I would have expected.
No problem getting whatever text line-up you want - static or
dynamically, but it won't work well as long as you apply absolute units
for font-size, line-height and vertical paddings and/or margins.
Reliable vertical alignment of a float based on the size of its
text-content - a kind of baseline alignment, requires well-calculated
use of relative units.
Is this what's the problem in this case then? According to the first part
it should always align on the top. So I'm a bit confused.
--
Jeroen
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout Overflow issue
Hi, I''m working on a design for a photo blog, and stumbled upon an overflow issue for which I can't find the cause. I copied all relevant code to a test file: URL: http://test.intellit.nl/test.html As you can see there is overflow for the X and Y axis, but I only expect the Y axis to be overflowing. What is causing this behavior? And how can I fix this? I suppose it has to do with box model which I probably interpret incorrectly? HTML css is valid (CSS partly because of opacity stuff for IE/mozilla failing;) Another question is; I want to have the Title and other text on the right on the same line. I can't get it to float correctly. I want to separate it in two different columns, one 70%, other 30% of max - width. Thanks a lot for your time. -- Jeroen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
On Dec 22, 2007, at 9:43 AM, Jeroen wrote:
I''m working on a design for a photo blog, and stumbled upon an
overflow issue for
which I can't find the cause.
I copied all relevant code to a test file: URL:
http://test.intellit.nl/test.html
As you can see there is overflow for the X and Y axis, but I only
expect the Y axis
to be overflowing. What is causing this behavior? And how can I fix
this? I suppose
it has to do with box model which I probably interpret incorrectly?
In your html:
div id=title-date style=width:100%;
your stylesheet specifies:
#title-date {
...
padding:10px;
100% + 20 px horizontal padding triggers a horizontal scrollbar, as
that makes #title-date wider than the parent container.
HTML css is valid (CSS partly because of opacity stuff for
IE/mozilla failing;)
You can safely drop the '-moz-opacity'. Gecko browsers support the
'opacity' property since at least Firefox 1.0, if not earlier.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
Jeroen wrote: http://test.intellit.nl/test.html As you can see there is overflow for the X and Y axis, but I only expect the Y axis to be overflowing. What is causing this behavior? And how can I fix this? I suppose it has to do with box model which I probably interpret incorrectly? Yes, you have added 10px padding to all sides of a 100% wide #title-date. That makes it 100%+20px wide in standard mode. Also: IE6/7 can't make up their mind about the container-width with a scrollbar, and IE6 can't calculate percentage-width properly anywhere. Another question is; I want to have the Title and other text on the right on the same line. I can't get it to float correctly. I want to separate it in two different columns, one 70%, other 30% of max - width. You didn't float them at all, and the width is missing on Title and is 100%+20px on the other. Some corrections included here... http://www.gunlaug.no/tos/alien/jer/test_07_1222.html ...the rest is yours. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Overflow issue
Philippe Wittenbergh wrote: ... You can safely drop the '-moz-opacity'. Gecko browsers support the 'opacity' property since at least Firefox 1.0, if not earlier. Nice side note. Is it common consent to drop workarounds for Fx pre 0.9? :) http://www.squarefree.com/burningedge/releases/0.9.html Regards Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout issues
Vicki Stebbins wrote: If anyone can point me in the direction to see a layout such as this, I'd really appreciate it. The concept is at: http://www.keenstreet.com.au/concept/concept.jpg http://www.gunlaug.no/tos/moa_27a.html ? regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout issues
HI All, I've looked at so many layouts trying to get my concept design (approved by client and can't change it) to work and I just keep ending up in a mess. What I'm trying to do is have the left navigation float left and the right navigation float right and the centre div remain as a fixed size and stay centred. There's many that almost do it but with the sizes etc it messes up, or the centre div moves to the left etc. If anyone can point me in the direction to see a layout such as this, I'd really appreciate it. The concept is at: http://www.keenstreet.com.au/concept/concept.jpg Many thanks, Vicki __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
