Re: [css-d] Call Button CSS not working in all browsers
I remember reading that somewhere also so I will give a try on my next go. Should I be using em instead of px? >>> >>> Site can be viewed temporarily at: >>> http://www.sportsmanfishing.com/webdev/index.html >>> >>> >>> >>> > I usually develop mobile first with all my base styles for phone width. > My > first break point MQ is usually 'min-width: 30em' (480px). > > > -- > > > Tom Livingston | Senior Front-End 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-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] Call Button CSS not working in all browsers
Thanks for your quick reply Tom. The display:inline did the trick. I was
under the impression that I needed a media query for anything below 321
which is why I left the second media query there. It was actually created
for me from the online tool I used to get started. Maybe I'm
misunderstanding how the break points work. I am doing some more reading
on media queries as we speak.
On Sat, September 13, 2014 12:15 pm, Tom Livingston wrote:
> Two things. You might want to check support for 'run-in'. Will
> display:inline; work?
>
>
> Also, those two MQs result in the same thing. Seems unnecessary to have
> both.
>
> On Saturday, September 13, 2014, Paul wrote:
>
>
>> Hello everyone, I am relatively new to responsive design and css with
>> media queries and have used an online tool to generate my template and
>> then customized it as I went along to try and learn. I seem to have it
>> working well as far as I can see without actually viewing on smart
>> phones but I cannot seem to get my call button to work in ff 32.0.1 or
>> Chrome
>> 37.02 but it works in Safari 5.1.7, IE 11 and Opera 12.16. Not sure
>> about older browsers.
>>
>> The code I used is this:
>> html - > src="images/callbutton.png" alt="call button" /> css - .call
>> {display:none;}
>> media query - /* Phone Landscape (480px) */ @media only screen and
>> (min-width: 321px) and (max-width: 480px) and
>> (orientation: landscape){.call {display:run-in; }}
>> and /* Phone Portrait (320px) */
>> @media only screen and (max-width: 320px) {.call {display:run-in; }}
>>
>>
>> Site can be viewed temporarily at:
>> http://www.sportsmanfishing.com/webdev/index.html
>>
>>
>> Any help greatly appreciated!
>> Paul
>>
>>
>> __
>> 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/
>>
>>
>
>
> --
>
>
> Tom Livingston | Senior Front-End 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] Call Button CSS not working in all browsers
Hello everyone, I am relatively new to responsive design and css with
media queries and have used an online tool to generate my template and
then customized it as I went along to try and learn. I seem to have it
working well as far as I can see without actually viewing on smart phones
but I cannot seem to get my call button to work in ff 32.0.1 or Chrome
37.02 but it works in Safari 5.1.7, IE 11 and Opera 12.16. Not sure about
older browsers.
The code I used is this:
html -
css - .call {display:none;}
media query - /* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and
(orientation: landscape){.call {display:run-in; }}
and
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {.call {display:run-in; }}
Site can be viewed temporarily at:
http://www.sportsmanfishing.com/webdev/index.html
Any help greatly appreciated!
Paul
__
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] Closing Suckerfish Dropdown Menus
Isabel Thanks for the pointer. I did get nearly to a solution with :active but it blocked my javascript onclick function. In the end I did as you suggested and used jQuery to assign clsHide and clsShow. Works a treat now - cheers. Paul W On 26/10/2012 22:58, Isabel Santos wrote: Paul, if you intend to load a javascript function on select, I gess you should use javascript to colapse the menus. You can give a class to the menus that by default keeps them open, and another class to define them as closed. Then you can close the menus by changing the classes via js, on load and on selection, and to open them on hover switching the class. There is no css safe pseudo-selector for selected containers. You can use ":active" but the spec isn't restrictive enough to avoid descrepancies between implementations, so different browsers interpret the spec differently and treat the :active state in very different ways. So if you are already loading js to deal with the menu, why not extend its functionality? hope it helps isabel On Fri, Oct 26, 2012 at 9:41 PM, Paul Warren <mailto:p...@warrensoft.co.uk>> wrote: Hi all I have implemented a suckerfish menu with a fixed horizontal menu bar and multi-level menus which works fine. http://cssdesk.com/ZuBLt However, I don't want menus to link to new pages, just onclick to another javascript function to control an ajax action. This is straightforward, but I am struggling to collapse the menu after a selection is made. My efforts so far have resulted in not being able to drop the menu down after a selection. I figured that somebody must have tweaked suckerfish to make it collapse on select? What do I need to do to make this work? Many Thanks. __ css-discuss [css-d@lists.css-discuss.org <mailto: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://evolt.org> -- http://www.evolt.org/help_support_evolt/ __ 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] Closing Suckerfish Dropdown Menus
Hi all I have implemented a suckerfish menu with a fixed horizontal menu bar and multi-level menus which works fine. http://cssdesk.com/ZuBLt However, I don't want menus to link to new pages, just onclick to another javascript function to control an ajax action. This is straightforward, but I am struggling to collapse the menu after a selection is made. My efforts so far have resulted in not being able to drop the menu down after a selection. I figured that somebody must have tweaked suckerfish to make it collapse on select? What do I need to do to make this work? Many Thanks. __ 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] Incorrect width - Opera Bug?
Sounds like it could be the Opera Minimum Font Size (Pixels) Setting (Preferences -> Advanced -> Fonts). -Paul Burney http://www.burney.ws/ On Tue, Apr 26, 2011 at 1:09 PM, Chetan Crasta wrote: > OK, I understand what's happening now. Actually, it is not the width > that is incorrect, it is the font size. Opera incorrectly calculates > the percentage value of the font size. The font size is declared on > the grand parent element as 18px, on the parent element as 0.3em and > on the element itself as 80%. This should compute to 4.32px but > Opera computes it as 9px. > Still haven't been able to fix it though. > > ~ Chetan Crasta > __ > 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-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] Positioning images within a table cell
> Georg's solution relied on the table being at the top of the page. To > fix it, add a "position:relative" rule to the table. Then his > solution should work beautifully. That would work in most browsers, but not Firefox*. If you enclose your table in a div with a "position: relative" rule, you should be all set. Hope it helps. -Paul Burney http://www.burney.ws/ * Thanks to Peter-Paul Koch: http://www.quirksmode.org/bugreports/archives/2004/12/table_never_rel.html __ 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] Positioning images within a table cell
> It sounds like you need to set position: relative on the td element. That > way, it will establish a system of coordinates for "absolutely" positioned > elements inside it - i.e., they will be positioned relative to the upper > left corner of the cell. I believe this is correct, but if I recall correctly, relative positions don't work reliably on table cells. If you find that to be the case, you'll need to add a container div inside of the table cell, set its width and height to 100%, and its position to relative. -Paul Burney http://burney.ws __ 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] Design question regarding columns and containers
At 2/7/2011 11:04 PM, G.S�rtun wrote: only a CSS table construct (or emulation) will make container keep elements (columns) lined up side by side as "columns" regardless of window-width. Just so that beginners don't misunderstand, you can keep columns floating side-by-side regardless of window width if you declare a fixed width on the block that contains all the columns. That doesn't strike me as being table emulation, but was that your intention? Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] dropdown menu bug in IE8
Hello first time I post to this distribution list, so I hope I'm doing it right. I have a bug in a dropdown menu in IE8 on this site : http://medisra.sideradesign.com the last items on the dropdown under the second menu item are unattainable as they disappear before they can be clicked. someone suggested it is being forced to IE7 compatibility mode and that's what causing the issue. any suggestions are welcome thanks Paul __ 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] Selecting a following a paragraph of a given class
Hi Linda,
You may be able to use an adjacent sibling selector to do it,
something like this:
.myclass + br {
display: none;
}
I don't think that will work in IE 6, but it seems to be supported in
most other browsers.
BR in general is a difficult tag to style, see for example:
http://stackoverflow.com/questions/899252/can-you-target-br-with-css
You might want to look into changing the source code itself using a
perl script or a tool like BBEdit that could process those 700 pages
in a few seconds.
Hope that helps,
-Paul Burney
http://www.burney.ws/
On Tue, Oct 19, 2010 at 5:24 PM, Linda Miller, DVM wrote:
> Is there a way to select all tags that follow a paragraph with a given
> class? i.e. This is a paragraph
>
> There may be other in the HTML so I cannot use this:
> br {display:none;}
> and I cannot delete all tags.
>
> There are about 700 pages and I do not want to go through each of them to
> make sure if the is needed or not. I do know that it is not needed
> following a paragraph with the class of "myclass".
>
> TIA,
> Linda
>
>
> __
> 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] Pure CSS fisheye menu with icons: a demo
>#navigation li a:hover,
>#navigation li a:active,
>#navigation li a:focus {
>color: red;
>-webkit-transform: scale(1.5);
>-moz-transform: scale(1.5);
>-o-transform: scale(1.5);
>}
etc.
All this stuff is good to know and I'm glad for the discussion.
However, for the case at hand, it seems like an awful lot of
complicated, proprietary fuss merely in order to use background
images in the menu. May I ask, why not simply use foreground icon
images and change their height or width on hover? That would be
cross-browser-compatible for anything that can parse CSS. I don't see
that having the icon in the foreground is any more of an issue than,
say, having a foreground thumbnail image in a gallery be the link to
its larger counterpart. Isn't this a case where one could argue both
sides of the question, "Is it content or is it presentation"?
Curiously,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Will -{moz, webkit}-border-radius ever be replaced by border-radius?
Dear css-discuss folks,
does anyone know if and when `border-radius` will be supported by
default, so `{moz,webkit}-border-radius` will be replaced?
I could not figure out a good search term and just found the tutorials
and for example [1], where they say, that there are also some
differences between `-moz-border-radius` and `-webkit-border-radius`.
Thanks,
Paul
[1] https://developer.mozilla.org/en/CSS:-moz-border-radius
signature.asc
Description: This is a digitally signed message part
__
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] Bulleted list question
At 5/18/2010 04:54 PM, Doug Niven wrote: >http://dev.franslanting.com/index.php?module=company&pId=100&start=0 > >The bulleted list under "Pricing" is where I'm having trouble. > >I'd like the bullets to be in the flush left position they are in >now, but I'd like the text --when it goes to a second line--to be >indented, instead of going flush left. > >This is a graphic that illustrates what I'm after: >http://www.franslanting.com/drafts/bulleted-list.jpg The trick is to give all items a margin-left where you want text to wrap to (say 1.5em), then give each list item a negative text-indent of the same value (e.g. -1.5em) to reset it to where it would have fallen naturally. The text-indent affects only the beginning of the item's text. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] link trickery
At 5/5/2010 11:32 PM, Chris Blake wrote: >I have a Joomla module installed that feeds articles into a small >block. The module lets me choose show or hide the 'read more' link, >which I have hidden. For now I do not want people to click on the >title or read more link to go the article, it is simply for show. >However the title is still clickable and I don't want it to be. Is >there anyway to disable a link via CSS? I want to display it, just not >have it working as a link. > >I have thought that an option (trick) could be to remove text >decoration of underline on rollover and possibly change the cursor to >be ?? (the standard one when hovering over normal text). At least this >way user will not see the cursor for link, and not try clicking. Making a link not a link and making a link not look like a link are two very different things. Even if the titles don't look or act like links, some people may click on them anyway by accident or out of habit, and if that breaks your site then styling them isn't a sufficient solution. That said, one way to disable a link in CSS is to cover it with a transparent layer that itself isn't clickable. Consider also that some user agents may not be interpreting CSS and if your links are present in the markup then they will probably be spidered by search engines, leading readers to the linked pages even if they can't get there from your styled page. I think a much better approach to the problem would be simply to manipulate the markup coming down from the server. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] height and margin: auto 0
At 4/28/2010 11:06 AM, Climis, Tim wrote: > > Would the block center vertically if the containing block had a declared > > height, or does that not matter either? > >It would not. > > > Thoughts? > >If you're in a position be able to specify height on both the block >and it's container, then this is pretty easy to accomplish. If you >can't do that, then the only ways to do it are resorting to tables >or javascript. Don't give up yet! There are the table-mimicking display properties http://www.w3.org/TR/CSS21/visuren.html#display-prop Also don't forget our beautifully recreated wiki: http://css-discuss.incutio.com/wiki/Centering_Block_Element#Vertical_Centering and I also had this one bookmarked: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Alternative format for definitions?
snipped: > > > >> > _Technicians_ are those individuals who perform ... > > > > > > >I see a problem with your markup though: > > > > > > >> > > > > >> > Technicians > > > >> > are those individuals who perform... > > > >> > > > > > > > >I don't think there is room for "are those" in there. > > > >Imho it should be: > > > > > > >Technicians > > > >Individuals who perform... > > > > I understand what you want to use, I'm just saying that I'm not sure about > > the semantics. > > DD stands for Definition Description so I don't think these descriptions > > should start with "are those". I think it should be a > "standalone" sentence. > > You are creating a bridge between DTs and DDs that should not exist (imho). > >Or, to put it another way, what the OP really wants is not a . Can you find any support for this assertion in the spec? http://www.w3.org/TR/html4/struct/lists.html#h-10.3 I'm seeing neither normative nor informative specifications for the linguistic grammar of a description. The HTML spec says nothing about standalone sentences or fragments in this context, probably because that would be outside its purview. If you check I think you'll find that most dictionary definitions are not complete sentences, e.g. <http://google.com/search?q=define%3Atechnician>. The OP's semantic content is clearly that of a definition list: terms and descriptions. What constructive goal do we achieve by attempting to constrain the grammar (in any given human language) of document content? Curiously, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Problem with limited control
A few moths ago I opened a cafepress.com store. We have limited control over the html and css. Currently you see my header as correct, or mostly correct (I still have some ideas for @font-face and typography, as well as not being able to center that stupid Facebook button, but one step at a time). The body section or #main seems unchangeable, or at least I haven't been able to move it around at all. You can note in the html markup my notes where I have to stop editing the html and where I can start again. Any creative ideas help to this mess with this in css would super terrificly greatly be appreciated! I would like to end up with the main section centered and the same dashed border as the header. Thanks a ton, Paul -- "Fishing puts me in touch with another of nature's species, in beautiful surroundings that are as old as time. That is where I want to be; that is how I'm renewed." ~Joan Salvato Wulff __ 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] Re the non-secure login code...
At 4/12/2010 09:56 AM, Philip TAYLOR wrote: >Shouldn't input type=text be input type=password ? >Otherwise the user's password will remain visible on-screen. FYI I was interested recently to read some push-back against the age-old assumption that password input should be obfuscated: Jakob Nielsen's Alertbox, June 23, 2009: Stop Password Masking Summary: Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures. http://www.useit.com/alertbox/passwords.html [I think this part of the discussion properly belongs over on WSG or Webdesign-L...] Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Re the non-secure login code...
> > I'd be happy to take a look, I'm always on the lookout for good > > login scripts and I'd be happy to provide any feedback I can. > > > > ONE*** This goes in the head section of the html page: > > > > > > TWO*** Then this form goes in the body section. You decide the > content to include other than the form fields. > > ... > > > > THREE*** The you create the "login.js" file from the following > code. We have 13 different logins leading to thirteen different > pages. Each one needs just 3 pieces of info: username, password and > the page linked to. This is not an appropriate topic for a CSS list. This presentational markup desperately begs to be stripped bare and replaced with nice clean semantic markup and a stylesheet. Any form functionality that depends on JavaScript cannot be secure. Write your security logic in a server-side script, then use JavaScript if you want to enhance the user experience, but asking JavaScript to be your gate-keeper is asking a narcoleptic to be your nightwatchman. Including JavaScript calls in markup is so '90s old-school it's amazes me that people still code this way. Google separation of development layers and progressive enhancement, please. Croggled, Paul __ 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] Zero out a style
At 4/10/2010 06:46 PM, Shanna Cramer wrote: >I frequently work on child themes and build custom style sheets in addition >to the parent style sheet. >Is there a way to zero out a style? Just remove any parent styling that was >applied to some element. If we're to take your question literally, the conceptual problem with "zeroing out" an element's styles is that there isn't really a zero-state in ordinary usage. When we launch a browser, page elements are styled according to the browser's inboard stylesheet plus the user's custom stylesheet if any. I'll assume that the closest to "zero" you really want to get is to disable author stylesheets but no others. Removing all author stylesheets could be done by using server-side or client-side scripting to intercept the markup and delete or disable pertinent link and style elements on the page. However, you're asking about disabling author styling for specific elements only, so scratch that. If you're OK with your changes reaching most but not all visitors, you could write a JavaScript routine that would seek out and remove style sheet rules that specifically targetted a particular element. However, the problem is complicated by the fact that an element is often styled by rules that refer not merely to it alone but also to others with the same selector pattern (nodeName, class, or ancestry). How can we "zero" the styles for one such element and not the others? One strategy might be to programmatically change an element's nodeName, id, and/or class so as to produce a new, unique element that isn't covered by the author style sheets at all, then adding style rules for the new element. Again, this could be done by intercepting the markup either server-side or client-side, the latter reaching a majority but not the totality of visiting UAs. Since "removing" styles is so problematic, I'm guessing that you'll probably settle for the much simpler alternative of setting an element's styles to known base values such as margin: 0; padding: 0; etc. This approach does not remove author styling from the equation leaving browser and user stylesheets in place, it potentially overrides them all. One technical challenge here is how to add your zeroing-out rules with great enough specificity that they trump all other rules in the parent stylesheets. You could try to bludgeon your way through that using !important but that can wreck a lot of furniture in a roomful of nested elements. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] CSS selector narrowing
>On 4/04/2010, at 8:05 AM, Ingo wrote:
> >Is there a way to select "first-level"
> > ul li only? I ask for the first selector here:
> >
> > # specific whitlist
> > .container ul li, # make it first level only (don't select if
> > wrapped)
At 4/3/2010 02:23 PM, Tim Snadden wrote:
>You could use a child selector for this... e.g.
>
>.container > ul li { background: url(bullet.png) left 5px no-repeat; }
>.container div ul li { background-image: none }
If you want to specify only the top-level list items in the top-level
list, I believe it should be:
.container > ul > li {}
Omitting either > will apply the rule to any descendant list item.
Without using child selectors (to accommodate older browsers), I
don't see any way to do it but:
.container li
{
background: url(bullet.png) left 5px no-repeat;
}
.container li li
{
background-image: none;
}
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Border makes gap between divs disappear
Thanks David
That's really useful information, as well as a fix that's saved me
hours of hitting my head on the keyboard.
Paul
On 10 March 2010 18:24, David Laakso wrote:
> Paul Jinks wrote:
>> I have a two column layout with each column divided into two boxes
>> (thus a kind of faux table). This is for navigation and each box
>> contains a definition list, the dl's in the right column being floated
>> right:
>> http://www.librarydevelopment.group.shef.ac.uk/sandpit/columns.html
>>
>> CSS looks like this:
>> #wrap {
>> margin:auto;
>> width: 800px;
>> }
>>
>> #rightcol {
>> width: 400px;
>> float: right;
>> }
>>
>> #leftcol {
>> width: 400px;
>> }
>>
>> As you can see, everything is more or less OK except that the bottom
>> box in the left-hand column is about 13px below the bottom box in the
>> right-hand column.
>>
>> While showing this to a colleague, i put a border on the bottom right
>> hand box for emphasis and... the gap disappeared:
>> http://www.librarydevelopment.group.shef.ac.uk/sandpit/columns-border.html
>> (in FF3, IE8 and Opera)
>>
>> I'd be really grateful for an explanation - and a solution.
>>
>> Paul Jinks
>>
>
>
>
> The explanation is margin collapsing.
> <http://www.w3.org/TR/CSS2/box.html#collapsing-margins>
> <http://complexspiral.com/publications/uncollapsing-margins/>
> The fix is:
> #col2 #bottom {
> /*border: solid red 1px;*/
> padding-top: 1px;
> }
>
> Best,
> ~d
>
>
>
>
> --
> desktop
> http://chelseacreekstudio.com/
> mobile
> http://chelseacreekstudio.mobi/
>
> __
> 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/
[css-d] Border makes gap between divs disappear
I have a two column layout with each column divided into two boxes
(thus a kind of faux table). This is for navigation and each box
contains a definition list, the dl's in the right column being floated
right:
http://www.librarydevelopment.group.shef.ac.uk/sandpit/columns.html
CSS looks like this:
#wrap {
margin:auto;
width: 800px;
}
#rightcol {
width: 400px;
float: right;
}
#leftcol {
width: 400px;
}
As you can see, everything is more or less OK except that the bottom
box in the left-hand column is about 13px below the bottom box in the
right-hand column.
While showing this to a colleague, i put a border on the bottom right
hand box for emphasis and... the gap disappeared:
http://www.librarydevelopment.group.shef.ac.uk/sandpit/columns-border.html
(in FF3, IE8 and Opera)
I'd be really grateful for an explanation - and a solution.
Paul Jinks
__
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] Basic doubt: align - text - font
At 3/3/2010 11:23 AM, Thierry Koblentz wrote: > > > fwiw, I don't think this is tabular data. > > > I'd go with a Definition List. > > > > Initially that's what it looked like to me. But then he turned it > > sideways, > > and made it look like a group of THs and TDs. > >imho, the way the OP presented the data has nothing to do with the markup >that should be used. >This is a CSS list, we should know better ;-) List, table, it makes no difference in my opinion. Relevant points might be: - How do you style DT-DD pairs side by side? I guess you could use negative margin-tops to bring each DT up to the original y-level, but that feels hackish and could easily break with text-only zoom in a fixed-width container. - I don't think tables are "simpler" markup than divs or lists. To the contrary, they minimally use the same amount of markup table div tr div td p or they use much more if one properly includes thead & tbody. - The "simplest" markup is not always the best, and I would ask the original poster to consider the "best" or "most semantically appropriate" ways to mark up the content, not the "simplest." - The most practical way to present them side by side is to enclose each head/datum pair in a wrapper or use a table. This eliminates definition lists and leaves us with UL and TABLE. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Trick for centering menu
At 2/18/2010 10:23 AM, Neil Hunt wrote: >Trying to center bottom navigation menu in footer of webpage. Menu ignores >centering and wants to left justify rather than center in a width defined >area. Any tricks to force the centering? It was suggested that I manually >center it by increasing the padding but I thought there had to be a better >way around this. Any ideas? There is a useful wiki that accompanies this listserve. Check this out: http://css-discuss.incutio.com/?page=CenteringBlockElement Briefly, if you know the width of your menu you can declare that in your stylesheet and then use a number of techniques for centering, including setting margins left & right to 'auto' or using the left: 50%; margin-left: -NNNpx where NNN is half your meun width. If you can't predict the width, you can try declaring the menu items inline and use text-align: center. If you can't use inline, say because it doesn't give you enough control over margins & padding, you can try table-cell and sacrifice cross-browser support. (It's easy to serve separate stylesheets to various versions of IE using conditional comments.) Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Floating to bottom-right of content : yet possible ?
At 2/16/2010 09:04 AM, jeffrey morin wrote: >On Sat, Feb 13, 2010 at 4:29 PM, Philip TAYLOR wrote: > > > I would like, for design reasons, to float an image > > to the bottom-right of a page's content (which will > > be textual by the time we reach bottom right). >You could try something like this. > >http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm > >it would require you cutting up your image but it looks like you can get the >effect you want. I would avoid putting relevant content into your footer. This solution is essentially the same as I had suggested on February 13th, pushing an image down the page a given amount. If you change your browser zoom to text-only and enlarge the text, the image stays put and the text flows below it, breaking the solution. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Floating to bottom-right of content : yet possible ?
At 2/13/2010 01:29 PM, Philip TAYLOR wrote:
I would like, for design reasons, to float an image
to the bottom-right of a page's content (which will
be textual by the time we reach bottom right).
Although I don't have an immediate solution for
your exact problem, I can point to a solution to
a similar problem that might lead you in the
right direction. This particular implementation
requires that you know in advance the distance
from the top of the container to the top of the
image, so you'd have to modify it significantly
for your purposes. You could express that
distance in ems but the vagaries of wrap-around
would ultimately defeat that in extended text-zoom.
The Wiñay Taki Ayllu website
http://winaytaki.org/ (under development)
contains bilingual text in two columns, with
images floated centered between them at various
distances down the page. The specifics of this
complete "floated centered" technique go beyond
your question, but here's the core idea for a stand-alone column:
Pairs of objects are floated right: first a
one-pixel-wide div and then an image:
__
Text begins here...
__
div.descent
{
clear: right;
float: right;
width: 1px;
height: 200px;
}
div.image-frame
{
clear: right;
float: right;
}
__
The descender pushes the image down the desired
distance without appearing to occupy noticeable room in the flow.
I hope this gives you some food for thought as you chew this one over...
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Train wreck in IE6
At 2/6/2010 10:09 PM, Kym Costanzo wrote: >Could you be more specific about the HTML errors? I did validate the HTML, >but the only errors I got were regarding the drop-down menu that I am asking >for help with. I can't fix those, as I don't know what I can do differently >with that menu. The validation errors have to do with the IE6 hack. Kym, you're making a simple typographical error in the HTML comment syntax. Your source code reads: .. For each list item, the first IE conditional comment should be correctly embedded in an HTML comment: .. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] horizontal, variable height nav bar. Doable with display: table?
At 2/3/2010 09:56 AM, Troy Harshman wrote:
>If I'm understanding correctly, you want each item in your menu to
>have the same dimensions. You would just need to add height and width
>then. Such as...
>
>#nav-menu a {display:block; height:30px; width:60px;}
>
>If you want them to grow with changes in browser text settings than
>you would size then using ems or percentages. If your navigation isn't
>using any pop-up or drop-down menus, then you generally don't need
>JavaScript unless you're doing something out of the ordinary.
Of course the big problem with vertical dimensions is that plain text
is, for practical purposes, unpredictable when it enlarges via
text-only zoom within a confined width. At some point during
enlargement, multi-word text will wrap around; at exactly what point
it wraps will depend on the font the browser uses to render it,
something you can suggest in the stylesheet but not control. Even if
you set your block heights in ems to enlarge with the text, the
framework will break when one of the menu items wraps -- if it's
inside a container whose width does not expand equally with the text.
Solutions that I'm aware of include:
1) Don't let the text wrap. This means not containing it in a
fixed-width block (setting the container's width in ems). This might
mean a) allowing the menu item blocks themselves to wrap so that very
large text will produce a multi-row menu or b) allowing the menu to
widen past the viewport margin creating a horizontal scroll. I really
dislike inflicting horizontal scroll so I prefer a).
2) Mark up the menu in a table or style it as a table to take
advantage of the cells on one row maintaining a fixed height. You
will still have the problem of keeping the anchors a consistent
height; block elements naturally fill their containers horizontally
but not vertically. You can assign the hyperlink href to the table
cell td itself in HTML5 or using JavaScript, and fall back to
different-height anchors for others.
3) Use client-side scripting to adjust all the anchor heights when
text size is changed, and fall back to different-height anchors in
user agents in which scripting is not running.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Keeping the footer at the bottom
At 1/19/2010 02:28 AM, Rachel Mawhood wrote: >This might help > >http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page The original poster wasn't asking for sticky footers, he was asking how to clear a float so that his footer sat neatly at the bottom of his longest column. While we digress, however, the sticky footer solution I've found works best is the one published by Cameron Adams a few years ago: http://www.themaninblue.com/writing/perspective/2005/08/29/ Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://www.juniperwebcraft.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] Text Kerning and Other Oddities on MAC but not Windows
>> Safari on a Windows system. (Vista & XP) However, when the same pages >> are viewed on a Mac (FF & Safari) the alignments are off, there >> seems to be additional kerning on the text, etc. In short, it's a >> mess. Everything is fully updated. I don't see the issue on FF 3.5 Mac, but I do see it in Safari. I wonder if Safari is invoking some kind of advanced font-rendering support because of esoteric CSS items in the stylesheet. For example: font-size-adjust:0.49; Or maybe it has something to do with the very small letter spacing: letter-spacing: 0.01em; Another thing to check would be whether the same fonts are being used on the PC and the Mac. font-family:Geneva, Arial, Helvetica, sans-serif; Good luck. -Paul Burney __ 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] :: page review :
At 10/5/2009 06:42 AM, David Laakso wrote: >The initial specs for this proposal call for the 10-item top horizontal >navigation. >The clinker is it needs to be functional in Blackberry and iPhone as >well. Turning the nav to block for handheld is not a problem. But, seems >to me, it will present the user with something akin to leaping the >"Great Wall of China" inorder access the primary content. Why not start out with a 'jump to main content' hyperlink, perhaps shifted off-stage but then made visible to handhelds? Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] IE7 issue / divs overlapping
On 18 Aug 2009, at 15:25, David Laakso wrote: > Put it on a public server and provide a clickable link to it in your > post to the list. Alternatively, post your question on doctype.com :) Paul -- Paul Farnell http://litmusapp.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] Doctype.com - Q&A site for designers
Hello everyone, Last week I launched a question and answer site for web designers, that I thought might interest people here: http://doctype.com When you ask a web design question, you can choose to have cross- browser screenshots generated automatically for any browser. Doctype also archives your HTML and CSS code. These two things combined should make it easier to solve people's CSS problems, I hope. Here's a good example of a question, together with its screenshots and CSS: http://doctype.com/2jZ Whilst there's certainly some overlap with css-discuss, I hope that Doctype will, in time, become a useful complement to this list. I'd be delighted to hear any feedback or suggestions you may have. I hope that some of you will join me over on Doctype! Cheers, Paul -- Paul Farnell http://doctype.com http://litmusapp.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] top nav tabs - distorted on laptop?
At 7/9/2009 03:23 PM, Greg Wilker wrote:
>I just noticed that the top nav "tabs" are distorted on my laptop with IE8.
>
>They work fine on my desktop with a widescreen monitor and they are working
>fine in FF of the laptop.
>
>http://www.achildsdream.com/htn/design3/index.html
>
>Anyone know what might be happening?
>
>(They are dropping "off", or "below" the div)
I wouldn't think this would have anything to do with the type of PC
you're using, only the type of browser, its settings, and the window
dimensions.
The page initially came up fine for me in IE8 (on my laptop), but I
was able to get the menu to wrap by increasing text size beyond
Medium. It did not wrap when I increased zoom or decreased window width.
In Firefox if I turn on Zoom Text Only and increase the size, the menu wraps.
Also in Firefox if I turn off text zoom but increase zoom, the
rightmost menu tab ("View Order") wraps around, then flips back up,
then flips back down, etc., with successive increases of size. In my
experience this often results from rounding fractional widths and
might be cured if you allowed at least one pixel of free space in
which the menu can flex, so to speak, as it's enlarging.
I see from the source that you're couching your page elements in
table cells (ick), so the rounding in this case probably arises from
the browser's attempt to fit the table in the allotted space as zoom
increases. The menu might increase a fixed number of pixels per zoom
notch, but if the table cell width is computed as some fraction of
the total table width then any increase of table width that doesn't
divide evenly among the cells in the row may result in zero increase
in the cell containing the menu, forcing the menu to wrap.
Personally I would strip the table markup out of this page and rely
on simpler markup & slightly more complicated styling to arrange
things the way you want.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Some see the style sheet and some don't.
At 6/26/2009 11:31 AM, tedd wrote: >with my site I have to declare the Content-Type in all my style sheets. Could you explain that? I've never encountered that necessity before. Paul __ 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] Some see the style sheet and some don't.
At 6/26/2009 10:53 AM, tedd wrote: >http://sperling.com/examples/audio-captcha/ > >Can anyone tell me why the style sheet here is seen in most browsers >but not in *some* versions of Safari and FireFox for the Mac? > >It's interesting that Opera for the Mac and IE6, 7, and 8 doesn't >have any problems seeing the style sheet. What gives? Hey Tedd, This might be related to your problem: When I bring up the stylesheet <http://sperling.com/examples/audio-captcha/style.css> in Firefox it displays in one lump without honoring carriage returns. Did you save that file in an unusual way or are you serving it with an unusual MIME type? Firefox tells me it's saved with UTF-8 encoding. Are you using a Mac? I wonder if it would help if you began it with a charset declaration, e.g. @charset "utf-8"; Curiously, Paul __ 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] Listings ol and li spacing
At 6/22/2009 03:12 AM, Tim Snadden wrote: >On 22/06/2009, at 9:43 PM, Paul Novitski wrote: > > > 3) LI is by default a block-level element, > >It's probably worth mentioning that the default display property of >'li' is list-item, not block. That's not to take away from the rest of >the advice though. I was referring not to li's display property but rather to the fact that it's normally a block-level element. To quote the old spec: 9.2.1 Block-level elements and block boxes Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). Several values of the 'display' property make an element block-level: 'block', 'list-item', and 'run-in' http://www.w3.org/TR/CSS21/visuren.html#block-boxes Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Listings ol and li spacing
At 6/22/2009 01:51 AM, BobSharp wrote:
>http://ttphp.open.ac.uk/~bs3578/test1/Week07_05-01.php
>
> >BobSharp wrote:
> >
> > How would you decrease the inherant spacing between
> > headings on ol: lines and the listings on li: lines ?
To begin, clean up your markup by removing the BReak tags from
between your LIs.
1) XHTML doesn't permit any children of a UL except LI.
2) Avoid using markup to force presentation. Instead, use CSS.
3) LI is by default a block-level element, which means that HTML
lists render vertically by default, so you don't need to force the
list items to render on separate lines.
(If you had styled them as inline or floated so they wanted
to render on the same row, there are better ways of forcing them into
a vertical list than by inserting break tags, even in legal
positions. But you're not creating that situation so all the break
tags are doing (other than invalidating your markup) is increasing
vertical spacing between your unordered list items.
The W3C HTML Validator is your friend:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fttphp.open.ac.uk%2F~bs3578%2Ftest1%2FWeek07_05-01.php
The answer to your question is that you can use top & bottom margin
and/or padding in your stylesheet to modify the default vertical
spacing between various elements.
Your list markup is:
Surname
...
If it's the vertical space between the surname heading and the list
below it that you want to decrease, I'd decrease the margin-bottom on
"ul h4" and/or the margin-top on "ul ol".
To replace the break tags I've suggested you remove, simply give each
ul li a margin-bottom of 1em or whatever, then counteract that with
ul ol li {margin-bottom: 0);
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Height 100%
On 21 Jun 2009, at 07:43, trevor bayliss wrote: > Thanks Divya I used min-height and it works well for IE 8 and FF. > What is the workaround for IE6 please? Thank you Hi Trevor. For IE6 you can simply specify the height as 535px. It'll auto-expand to be larger than that if the content requires it. However, make sure you specify the height in a conditional comment (or using an IE hack), since other browsers *will* obey that rule and make it strictly 535px high and no more. Paul -- Paul Farnell http://litmusapp.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] Footer doesn't stick to bottom of page
At 6/19/2009 01:35 PM, Norman Fournier wrote: >If anyone knows a way to effect both the footer staying anchored to >the bottom of the browser window and/or appearing at the end of the >text, that would be fantastic, or is it a choice of one or the other? I've used Cameron Adams' solution several times successfully: footerStickAlt: A more robust method of positioning a footer by Cameron Adams http://www.themaninblue.com/writing/perspective/2005/08/29/ "...the Web page footer to be positioned either at the bottom of the browser window or at the bottom of the Web page whichever is visually lowest." Regards, Paul ______ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Stretching in IE7, even worse in IE6.
> Georg, First of all, thanks a million for your help with this. It is a wonderful learning experience. I think it's amazing that so few little changes can have such a great effect. I updated the css files as you told me and now, IE 7 is looking as good as FF & IE8. Even IE 6 is starting to shape up, though I do need to do a bit more research on IE 6. For example, the main navigation links appear without borders and without their background images, and sibling selectors don't work. Do I need to address the IE 'box model' issue to fix the links and the image positions? I'll have a search for a .png fix for IE6. Thanks for all the great tips! Oh, btw, > When using conditionally commented stylesheets to fix IE, put them after the default stylesheet(s) in the page head. That'll make it easier to override the default stylesheet(s) with IE-specific styles without having to bother with modifying selector specificity to make those IE styles kick in. I tried this as you said but I found I still had to increase specificity on the conditional comments otherwise it didn't seem to work. > http://www.satzansatz.de/cssd/onhavinglayout.html I heard good things about that article, looking forward to reading it. Thanks again! >David Thanks very much for the suggestions! Glad you like the cow :) I think I can learn a lot from that layout you sent - it's simpler than what I've been trying. For now though I want to try to push layout ideas out of the markup. But I will work some of your ideas in. I also like what you did with the images. Even the wireframe itself is an interesting look from a design perspective, especially the dots. Thanks :) A couple of little things - does anyone know why: > http://www.blueprintdesign.ie in FF when we zoom out, the background image doesn't stay fixed? Also, in Safari, the 'back to top' button only leaves us half way up the page? Thanks! Send instant messages to your online friends http://uk.messenger.yahoo.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] Stretching in IE7, even worse in IE6.
Hi, my name is Paul :) this is my first post -
I'm new to CSS and I'm having some Internet Explorer positioning issues, I'd
appreciate any help.
In IE7 there is unwanted space occuring in the place where my images originally
were before I positioned them. This extends the list well below the footer:
www.blueprintdesign.ie
Here's some CSS:
ul#clients {
position: relative;
float: left;
background: none;
margin: -49px 40px 0 34px;
padding: 0 0 0 0px;
width: 48%;
max-height: 2700px;
}
ul#clients li {
padding: 0em;
list-style-type: none;
margin-bottom: 60px;
}
ul#clients li p {
width: 280px;
color: #FF;
padding: 0px 0px 10px 32px;
margin-right: 10px;
margin-top: 10px;
}
ul#clients li p img {
float: right;
border-bottom: 2px solid #49;
border-top: 1px solid #007DFF;
padding: 34px 34px 34px 34px;
margin: 0px -680px 100px 0;
}
Here's some IE conditional CSS that might be relevant:
#content-main ul#clients li p img {
margin: 10px -680px 10px 100px;
width: 580px;
padding: 34px 34px 34px 34px;
float: right;
}
The issues with IE6 seem to affect every part of my design - it's hard to know
where to start, but for now I would be grateful even just getting IE7 in order.
Any comments, criticism or suggestions @ all are welcome!
Thanks,
Paul.
Send instant messages to your online friends http://uk.messenger.yahoo.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] margin: 83_qem?
>> I encountered the following CSS declaration: >> margin: 83_qem >> Does anyone have any idea what kind of unit it is? Apparently it's >> used in Safari's internal style sheet >> (http://www.accessifyforum.com/viewtopic.php?t=5551), and I saw it >> mentioned in Nokia documentation >> >> (http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-9EA77434-CC44-429F-BDD3-3AF4357CCF69.html) >> Can't find a definition though, and the lack of W3C links suggests >> that this unit is non-standard. Could someone help? > > Hey PPK-- > > I believe qem stands for "quirky em" and is a proprietary Webkit syntax used > to refer to a margin which can be collapsed when the page is in quirks mode. > [1] Thanks! Odd, but I expected something like this, especially as Nokia uses WebKit as its browser. > If you're anything like me, you're already appreciating the irony that > *you're* the one that wrote the list to ask about this. ;-) Contrary to popular belief I don't know everything . > [1] > http://www.opensource.apple.com/darwinsource/10.3/WebCore-106/khtml/css/css_valueimpl.h > (about two-thirds of the way down the page) Thanks! This did not show up in my search results. --- ppk, freelance front-end consultant, agent, and trainer http://www.quirksmode.org/about/ -- __ 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] margin: 83_qem?
Hello, I encountered the following CSS declaration: margin: 83_qem Does anyone have any idea what kind of unit it is? Apparently it's used in Safari's internal style sheet (http://www.accessifyforum.com/viewtopic.php?t=5551), and I saw it mentioned in Nokia documentation (http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-9EA77434-CC44-429F-BDD3-3AF4357CCF69.html) Can't find a definition though, and the lack of W3C links suggests that this unit is non-standard. Could someone help? Thanks, __ 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] two navigation menu can't float to left?
Hello there,
I made 2 navigation menu, and wish them float to left. They do that
correctly in Firefox, but in IE, again, there is problem: the first nav menu
just doesn't floadt to left, instead, it goes to the RIGHT SIDE.
http://bratislava.chinafood.sk
thank you for your advice!
Paul Yung
- Original Message -
From: "Alan Gresley"
To: "Paul Jung"
Cc:
Sent: Wednesday, December 24, 2008 2:15 PM
Subject: Re: [css-d] overflow problem in IE
Paul Jung wrote:
Thank you very much, but it didn't solve the problem, please look
http://www.europeeurope.net/index.php?pageNum_Recordset2=8&totalRows_Recordset2=4913
the same problem appears, is it a flowout problem? or text wrap problem?
it seems to me, that it can not deal with text wrap correctly, for
example there is a long url address
http://www.europeeurope.net/bbs/showthread.php?t=1... and it doesn't
know where to wrap the text
Thank you!
Hello Paul, as David has suggested, it helps to indicate which version
of IE you are seeing the bug in since all versions of IE have different
bugs.
In you case, the bug is the IE expanding box bug [1]. I would say that
feeding IE6 and earlier this fix should solve the problem.
.row2 {width:200px} /* adjust width to suit */
I have not tested the fix.
[1] <http://www.positioniseverything.net/explorer/expandingboxbug.html>
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
http://www.wearechange.org/
__
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] the correct way to declare textarea width
Adding style="overflow:hidden;" to the tag will get rid of the control, but I think you'll still have the same problem w/the width. Paul C. Wampler Webmaster College and University Professional Association for Human Resources (CUPA-HR) 1811 Commons Point Drive Knoxville, TN 37932 (865) 637-7673 ext. 102 http://www.cupahr.org -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Eric Cash Sent: Friday, January 09, 2009 4:28 PM To: css-d@lists.css-discuss.org Subject: [css-d] the correct way to declare textarea width I hate form elements... I've run into this problem before, I don't think I've ever actually understood it. On this page http://scotaganda.com/work/MineKey/opinionsBoard.html the "Express your opinion" textarea is fine in firefox, but both safari and ie place "control" on the right hand side of the textarea, which makes it grow about 8px, and break the layout. I'm not sure of the correct way to get this thing to behave, and I'd rather not keep poking around in the dark here I have a div wrapped around it, with the correct width, and I'm not sure why just setting the textarea's width to 100% won't correctly display, any help here? __ 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] .content problem
Georg:
Your answers is so good that I printed them great advises. I really
appreciated your help.
Thank you very much,
Paul
- Original Message -
From: "Gunlaug Sørtun"
To: "etsk jung"
Sent: Monday, January 05, 2009 8:31 AM
Subject: Re: .content problem
> etsk jung wrote:
>> Georg:
>>
>> Thank you very much! I read the DW manual and another book on CSS but in
>> vain, it is you solved the problem.
>> I am so frustrated why there are no good literature on CSS Thank you,
>> it is really nice of you to help.
>>
>> Paul
>
> Well, Paul,
>
> I have only read one book on CSS - mentioned here...
>
> <http://www.gunlaug.no/rips/rips_080903.html>
>
> ...as my good friend Ingo Chao sent me a free copy. Good book, but not
> really anything new to me in it - he borrowed and expanded on some of
> my ideas in addition to his own :-)
>
> There's a lot of literature on how to create both simple and a bit more
> advanced layouts with CSS, but no-one would dare try to write about how
> to handle all the various browser bugs and other peculiarities.
> There are millions of bugs and bug-combinations, and the "map" changes
> with each new browser release. Such a book would end up the size of a
> phone-book, which would have to be updated every few months.
>
>
> CSS is best learned directly from the source...
>
> <http://www.w3.org/Style/CSS/#specs>
>
> ...and tested for support across browser-land. One way to test is
> through minimal test pages, like the few I've listed here...
>
> <http://www.gunlaug.no/contents/wd_1_02_03.html>
>
> That way you can get a real sense of what works and what doesn't, and
> can make choices for what to do with and include in real designs.
> The only way to become a good web designer/coder is through practicing,
> practicing and more practicing, and even that will only work well if you
> apply strict quality control at every step of the way and don't let
> anyone throw you off.
>
> regards
> Georg
>
>
>>> Date: Tue, 30 Dec 2008 14:02:18 +0100
>>> From: gunla...@c2i.net
>>> To: et...@hotmail.com
>>> CC: css-d@lists.css-discuss.org
>>> Subject: Re: .content problem
>>>
>>> Paul Jung wrote:
>>>
>>>> have been working very hard to find the problem why the map of
>>>> http://www.chinafood.sk/ doesn't display correct in IE, it always sinks
>>>> to the bottom, please help!
>>> To use the correct terminology: it doesn't "sink" - it gets "pushed
>>> down" because there's not enough space for it where you want it to stay.
>>> All caused by bugs in IE6 (and older).
>>>
>>> 1: remove or zero out the backside margins on both side-columns - for
>>> _all_ browsers. Those margins do nothing but make the layout
>>> unnecessarily tight in good browsers, and too tight when IE6' bugs are
>>> added.
>>>
>>> What you need there is this...
>>>
>>> .thrColFixHdr #sidebar1 {margin-right: 0;}
>>> .thrColFixHdr #sidebar2 {margin-left: 0;}
>>>
>>>
>>> 2: the main-column is positioned by its own margins, and IE6 (and older)
>>> throws in its "3px-jog" bug as addition to the left margin, and its
>>> "auto-expansion" bug to the width affecting the right side margin.
>>>
>>> The right side margin isn't doing any good in any browser since the
>>> main-column has width and self-aligns left where it rides on its left
>>> margin, so unless you plan to reverse the document's direction you
>>> should serve the following to _all_ browsers...
>>>
>>> .thrColFixHdr #mainContent {margin-right:0;}
>>>
>>>
>>> 3: now there's only the "3px-jog" bug to take care of in IE6 (and
>>> older).
>>>
>>> Place this in your >> http://www.gunlaug.no
>>
>> _
>> Invite your mail contacts to join your friends list with Windows Live
>> Spaces. It's easy!
>> http://spaces.live.com/spacesapi.aspx?wx_action=create&wx_url=/friends.aspx&mkt=en-us
>
>
> --
> http://www.gunlaug.no
>
>
__
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] z-index problem with flash
Add this parameter to your flash code: That should take care of it. __ Paul C. Wampler College and University Professional Association for Human Resources (CUPA-HR) 1811 Commons Point Drive Knoxville, TN 37932 (865) 637-7673 ext. 102 http://www.cupahr.org -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Jody Levinson Sent: Monday, January 05, 2009 4:29 PM To: CSS-D Subject: [css-d] z-index problem with flash I have a page with a flash movie that is covering up the CSS flyout navigation in IE. I've tried using z-index to move the flash down, but it's not working so far. Here is the page. Can you help? http://www.atlas-inspection.com/newsite/panoramo_video.html Thank you so much! Jody -- TroutDream Graphics, Inc. Always fresh. Never canned. http://troutdream.com 425-883-8277 928-833-8277 fax __ 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] Help needed for a brand new site (in costruction)
Personally as a beginner css-er I would like to see #1 and #3.Thanks for the vote!, Paul We can't solve problems by using the same kind of thinking we used when we created them. ~Albert Einstein If you want the truth to stand clear before you, never be for or against. The struggle between "for" and "against" is the mind's worst disease. ~Sent-ts'an, c.700 C.E. On Mon, Jan 5, 2009 at 06:31, Cristian Palmas wrote: > 2009/1/5 Gabriele Romanato > > > Dear all, > > as you can see, my english resources are scattered through 2 > > directories. I've realized that although Google seems to like these > > resources, this is not the best solution for my English-speaking > > readers. So I've created a 3d-level domain on www.css-zibaldone.com. > > Now I ask you: what features would you like to see here? Please choose > > among the following or propose new ones: > > > > 1. Tutorials on CSS: from beginner to pro > > 2. Projects: Sites or things I've worked on > > 3. Demos (clonings, prototypes, etc.) > > 4. CSS and: > >4.1 JavaScript > >4.2 DOM > >4.3 SVG > >4.4 XML > >... other > > Help me to build a great new site. Thanks! > > > > G. ^.^/ > > > > > Hi Gabriele (are you Italian like me?), > > I think that will be useful for you to make a Projects page with your work, > both to make other know your competence and to inspire someone else viewing > the solutions you applied. > > For the CSS point of view (and to avoid being OT...) I think that might be > more useful to develop point 4 instead of point 1. There is a huge bunch of > CSS basics material out there, more or less intuitive, simple and/or > complete. > Instead, there is little about CSS and particular integration with SVG and > XML. Even Javascript and behaviour with the DOM are important subjects to > analyse: there is some material about but the more is the better... > > Your examples about CSS/XML you pointed out some e-mail ago in this mailing > list were very interesting. > Bye. > > > -- > ~ Cristian Palmas ~ > http://www.cristianpalmas.it > __ > 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/
[css-d] .content problem
Hello there, have been working very hard to find the problem why the map of http://www.chinafood.sk/ doesn't display correct in IE, it always sinks to the bottom, please help! Happy new year, css fans! Paul __ 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] overflow problem in IE
Georg,
Thank you very much. It is already good enough, i am satisfied with the
result. Thank you!
Paul
- Original Message -
From: "Gunlaug Sørtun"
To: "Paul Jung"
Cc:
Sent: Thursday, December 25, 2008 12:17 AM
Subject: Re: [css-d] overflow problem in IE
> Paul Jung wrote:
>> [...] As I observe it, it looks like that the long url address was
>> regarded as one inseparable word and thus was not text wrapped
>> according to the table width.
>
> Browsers ability to break long words on certain characters varies, but
> we can at least prevent the entire table from being expanded - in most
> browsers - by adding something like...
>
> .thrColFixHdr #sidebar2 .newreply table {
> table-layout: fixed;
> width: 100%;
> }
>
> Seems to have a reasonably good effect on your case in all browsers, so
> at least all breakable text stays visible and readable within the width
> of the column.
>
> God Jul.
> Georg
> --
> http://www.gunlaug.no
> __
> 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] overflow problem in IE
Georg, Thank you very much in this Christmas season to help me! The codes you wrote really solve the problem, but "> ...and you will probably want to fix the width of the table in .newreply > to prevent it from overflowing its container and get "cut off", which > seems to be a problem in all browsers." THat is another problem. I really have no idea how to fix. Do you have any clue? As I observe it, it looks like that the long url address was regarded as one inseparable word and thus was not text wrapped according to the table width. Such a normal action as text wrapping become a drag in dreamweaver. Thank you! Merry Christmas! Paul - Original Message - From: "Gunlaug Sørtun" To: "Paul Jung" Cc: Sent: Wednesday, December 24, 2008 2:22 PM Subject: Re: [css-d] overflow problem in IE > Paul Jung wrote: >> Thank you very much, but it didn't solve the problem, please look >> http://www.europeeurope.net/index.php?pageNum_Recordset2=8&totalRows_Recordset2=4913 >> > Note that IE5.0 won't react on "zoom: 1;" as 'hasLayout' trigger - it > needs a dimensional trigger like "height: 1%;". > > IE5.0 needs the 'hasLayout' trigger to #header David gave you, as a > stabilizer to avoid the "dropped page" problem. > > You should also restrict the last conditional comment so it doesn't end > up styling all future IE/win versions. > > For IE7 down through to IE5.01, you need (only) these basic corrections... > > > > > ...and you will probably want to fix the width of the table in .newreply > to prevent it from overflowing its container and get "cut off", which > seems to be a problem in all browsers. > > regards > Georg > -- > http://www.gunlaug.no > __ > 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] overflow problem in IE
Thank you very much, but it didn't solve the problem, please look
http://www.europeeurope.net/index.php?pageNum_Recordset2=8&totalRows_Recordset2=4913
the same problem appears, is it a flowout problem? or text wrap problem? it
seems to me, that it can not deal with text wrap correctly, for example
there is a long url address
http://www.europeeurope.net/bbs/showthread.php?t=1... and it doesn't know
where to wrap the text
Thank you!
- Original Message -
From: "David Laakso"
To: "Paul Jung"
Cc:
Sent: Tuesday, December 23, 2008 12:22 AM
Subject: Re: [css-d] overflow problem in IE
Paul Jung wrote:
I have a problem, it appears only in IE, here,
http://www.europeeurope.net/index.php?pageNum_Recordset2=7&totalRows_Recordset2=4919
in this page, the layout just broken, the maincontent sank to the bottom.
Paul
It helps to state what browser version (there are a lot of them) of IE is
giving a problem. I guess you mean IE/5.01.
Try changing the CSS in the IE 5 conditional comment to read:
.thrColFixHdr #header {height: 1%;}
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; margin-left: 0; }
.thrColFixHdr #mainContent {width:520px; margin-left: 290px;margin-right:
20px;}
__
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/
[css-d] overflow problem in IE
Hello there,
I have a problem, it appears only in IE, here,
http://www.europeeurope.net/index.php?pageNum_Recordset2=7&totalRows_Recordset2=4919
in this page, the layout just broken, the maincontent sank to the bottom.
The codes of the second div inside the right sidebar go:
newreply {
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
background-color: #F1F1FC;
border: 1px solid #D2D2F7;
display: block;
}
where did I make mistakes? Thank you very much!
Paul__
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] How not to display the a dark color frame around a pic?
WOW! You are a magician! :)
THank you very much.
CSS is so powerful.
Paul
- Original Message -
From: JR Heard
To: Paul Jung
Sent: Saturday, December 20, 2008 11:28 PM
Subject: Re: [css-d] How not to display the a dark color frame around a pic?
.forumarrowicon {
border:none;
}
On Sat, Dec 20, 2008 at 4:22 PM, Paul Jung wrote:
Dear All,
I have this strange problem, have no idea how to solve it.
http://www.europeeurope.net/index.php
under the logo "let's talk europe" there is a green arrow, a .png file,
since it is also a link, so it got the dark colored frame around it, and
because of that the beautiful arrow lost its shape.
Who can give me a hand? Many thanks!
Paul from Slovakia
Merry Christmas to every CSS fan!
__
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/
[css-d] How not to display the a dark color frame around a pic?
Dear All, I have this strange problem, have no idea how to solve it. http://www.europeeurope.net/index.php under the logo "let's talk europe" there is a green arrow, a .png file, since it is also a link, so it got the dark colored frame around it, and because of that the beautiful arrow lost its shape. Who can give me a hand? Many thanks! Paul from Slovakia Merry Christmas to every CSS fan! __ 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] some problems...
Ok I have it looking exactly like I want it in ie7, (www.pmcsravenstone.com ) everything else, breaks... I don't know where I went wrong. IE5.5 is all flippin' out, does it not accept margin: 0 auto? IE6 obviously does not accept png transparency... why exactly did they forget that? And on that note, please see attached and let me know what you think about this 'fix?' Everything else(FF, Opera, IE8b2, Chrome, all of them) breaks the exact same way, so I know it's me. What I'm seeing is extra space, assuming some kind of margin?, between the #navdiv and the #container. As well as, the #content won't acknowledge the margin-top: 20px that I set for it. All help is kindly appreciated!, Paul Ravenstone -- We can't solve problems by using the same kind of thinking we used when we created them. ~Albert Einstein If you want the truth to stand clear before you, never be for or against. The struggle between "for" and "against" is the mind's worst disease. ~Sent-ts'an, c.700 C.E. __ 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] Column Height
Is there a way to have a 3 column layout, where the right and left are a fixed width, the center is fluid, and all three columns are the full length between the header and the footer, which are set at the full length of the screen? AND to do it all with CSS? Thanks, Paul -- We can't solve problems by using the same kind of thinking we used when we created them. ~Albert Einstein If you want the truth to stand clear before you, never be for or against. The struggle between "for" and "against" is the mind's worst disease. ~Sent-ts'an, c.700 C.E. __ 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] http://validator.w3.org can not validate a page
Hello there, I used http://validator.w3.org to check a page: http://www.europeeurope.net/index.php but it returned with such erroe: "Sorry, I am unable to validate this document because on line 454 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. The error was: utf8 "\xE4" does not map to Unicode " Does anybody know anything about that? Thank you! Paul __ 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] Too much empty space in IE and one lost picture, please help
Hello there, Please look at http://www.poet.sk/hidveghyova/go.php/component/id/12/ Did anybody have some experience? I got to know only yesterday when a friend called me that he, with his IE browser, can not see this page. I opened it in IE, and found out that the main content is after some 1000 pixel empty spaces, and the second photo of a book can not be displayed. I appreciate any suggestion and help, thank you. Paul__ 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] top border of side bars are lower than maind content in IE6
Georg,
WOW!!! You are a genius!!! Works!!!
THANK YOU!!!
Paul
- Original Message -
From: "Gunlaug Sørtun" <[EMAIL PROTECTED]>
To: "Paul Jung" <[EMAIL PROTECTED]>
Cc:
Sent: Saturday, November 22, 2008 7:44 PM
Subject: Re: [css-d] top border of side bars are lower than maind content in
IE6
> Paul Jung wrote:
>> Georg
>>
>> I studied your version, and changed some of the css codes, but I
>> still can not get where you are. In IE, the top of side bars are
>> still lower than that of main content. It is so ugly. I don't know
>> what's wrong. Could you please give me a hint?
>
> Comment out or delete this...
> .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
> ...that you have in your !--[if IE]> styles.
>
> 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-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] top border of side bars are lower than maind content in IE6
Georg I studied your version, and changed some of the css codes, but I still can not get where you are. In IE, the top of side bars are still lower than that of main content. It is so ugly. I don't know what's wrong. Could you please give me a hint? Paul - Original Message - From: "Gunlaug Sørtun" <[EMAIL PROTECTED]> To: "Paul Jung" <[EMAIL PROTECTED]> Cc: Sent: Saturday, November 22, 2008 5:03 PM Subject: Re: [css-d] top border of side bars are lower than maind content in IE6 > Paul Jung wrote: >> Gunlaug, thank you, for answering, but I am still a beginner of css, >> I even have problem to underestand some of the basic terms. > > Fair enough. > As a beginner you'll have take the time to study every detail in > responses you receive. After all: it has taken those of us who know the > answers quite a long time to get to that point, and there are no working > shortcuts. Take your time and you'll get there. > > One thing that does make the rendering of your design pretty > unpredictable across browser-land, is the many errors in your markup. I > haven't corrected any of those because they don't bother me, but 57 > errors in one page is 57 too many - even if some of them are repeated > messages caused by the same errors. > >> I tried firefox, i found one problem, that the navigation menu >> doesn't appear. Who know the reason? > > Again: > > 1: IE6 doesn't respect declared dimensions, while Firefox does. > > You have declared dimensions that are too small for the content, so the > content disappears outside its intended container. > The reason for this is you're - knowingly or not - relying on > browser-defaults for lists and other elements, and they are not > identical across browser-land. > > > Now, carefully compare the CSS in yours... > >>>> <http://www.europeeurope.net/> > > ...element for element with that in mine... > >>> <http://www.gunlaug.no/tos/alien/pj/test_08_1122.html> > > Everything shows up in mine - in all browsers, because I've leveled > rendering of lists and other elements by declaring my own values where > browser-defaults differ. > > In addition to that I'm letting containers expand freely in height - by > commenting out your 'height' declarations, and made sure containers > expand properly even when content consists of floats - I'm using floats > to contain floats in this 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/ > __ 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] top border of side bars are lower than maind content in IE6
Georg, I saw your version, it is amazing, how you managed it. I have a lot to learn. So far, thank you again, and have a nice weekend! Paul - Original Message - From: "Gunlaug Sørtun" <[EMAIL PROTECTED]> To: "Paul Jung" <[EMAIL PROTECTED]> Cc: Sent: Saturday, November 22, 2008 5:03 PM Subject: Re: [css-d] top border of side bars are lower than maind content in IE6 > Paul Jung wrote: >> Gunlaug, thank you, for answering, but I am still a beginner of css, >> I even have problem to underestand some of the basic terms. > > Fair enough. > As a beginner you'll have take the time to study every detail in > responses you receive. After all: it has taken those of us who know the > answers quite a long time to get to that point, and there are no working > shortcuts. Take your time and you'll get there. > > One thing that does make the rendering of your design pretty > unpredictable across browser-land, is the many errors in your markup. I > haven't corrected any of those because they don't bother me, but 57 > errors in one page is 57 too many - even if some of them are repeated > messages caused by the same errors. > >> I tried firefox, i found one problem, that the navigation menu >> doesn't appear. Who know the reason? > > Again: > > 1: IE6 doesn't respect declared dimensions, while Firefox does. > > You have declared dimensions that are too small for the content, so the > content disappears outside its intended container. > The reason for this is you're - knowingly or not - relying on > browser-defaults for lists and other elements, and they are not > identical across browser-land. > > > Now, carefully compare the CSS in yours... > >>>> <http://www.europeeurope.net/> > > ...element for element with that in mine... > >>> <http://www.gunlaug.no/tos/alien/pj/test_08_1122.html> > > Everything shows up in mine - in all browsers, because I've leveled > rendering of lists and other elements by declaring my own values where > browser-defaults differ. > > In addition to that I'm letting containers expand freely in height - by > commenting out your 'height' declarations, and made sure containers > expand properly even when content consists of floats - I'm using floats > to contain floats in this 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/ > __ 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] top border of side bars are lower than maind content in IE6
My goodness! 57 errors! It is really a shame of me. I have to find out where they are, and how did I make them. THANK YOU! Paul - Original Message - From: "Gunlaug Sørtun" <[EMAIL PROTECTED]> To: "Paul Jung" <[EMAIL PROTECTED]> Cc: Sent: Saturday, November 22, 2008 5:03 PM Subject: Re: [css-d] top border of side bars are lower than maind content in IE6 > Paul Jung wrote: >> Gunlaug, thank you, for answering, but I am still a beginner of css, >> I even have problem to underestand some of the basic terms. > > Fair enough. > As a beginner you'll have take the time to study every detail in > responses you receive. After all: it has taken those of us who know the > answers quite a long time to get to that point, and there are no working > shortcuts. Take your time and you'll get there. > > One thing that does make the rendering of your design pretty > unpredictable across browser-land, is the many errors in your markup. I > haven't corrected any of those because they don't bother me, but 57 > errors in one page is 57 too many - even if some of them are repeated > messages caused by the same errors. > >> I tried firefox, i found one problem, that the navigation menu >> doesn't appear. Who know the reason? > > Again: > > 1: IE6 doesn't respect declared dimensions, while Firefox does. > > You have declared dimensions that are too small for the content, so the > content disappears outside its intended container. > The reason for this is you're - knowingly or not - relying on > browser-defaults for lists and other elements, and they are not > identical across browser-land. > > > Now, carefully compare the CSS in yours... > >>>> <http://www.europeeurope.net/> > > ...element for element with that in mine... > >>> <http://www.gunlaug.no/tos/alien/pj/test_08_1122.html> > > Everything shows up in mine - in all browsers, because I've leveled > rendering of lists and other elements by declaring my own values where > browser-defaults differ. > > In addition to that I'm letting containers expand freely in height - by > commenting out your 'height' declarations, and made sure containers > expand properly even when content consists of floats - I'm using floats > to contain floats in this 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] top border of side bars are lower than maind content in IE6
Gunlaug, thank you, for answering, but I am still a beginner of css, I even have problem to underestand some of the basic terms. I tried firefox, i found one problem, that the navigation menu doesn't appear. Who know the reason? Paul - Original Message - From: "Gunlaug Sørtun" <[EMAIL PROTECTED]> To: "Paul Jung" <[EMAIL PROTECTED]> Cc: Sent: Saturday, November 22, 2008 2:05 PM Subject: Re: [css-d] top border of side bars are lower than maind content in IE6 > Paul Jung wrote: > >> if you open in IE 6, http://www.europeeurope.net/ you will see the >> top border of the left and right side bar are lower than that of >> maind content. >> >> But when i open in firefox, that is ok. >> >> why? > > 1: IE6 doesn't respect declared dimensions, while Firefox does. > > 2: You've fed IE styles it doesn't need and never should be given, while > trying to compensate for an imaginary bug. > > 3: Your page breaks in all browsers but IE6 upon font resizing, because > of all those declared 'height', since all browsers but IE6 and older > respect declared 'height'. > > > If you give all browsers the same styles, and the freedom to adjust > element 'height' as they see fit, they'll become "environmentally > friendly" and line up those columns the same way. > > Example: > <http://www.gunlaug.no/tos/alien/pj/test_08_1122.html> > > (the devil is in the details - but so is the salvation ;-) ) > > 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-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] top border of side bars are lower than maind content in IE6
Hello there, if you open in IE 6, http://www.europeeurope.net/ you will see the top border of the left and right side bar are lower than that of maind content. But when i open in firefox, that is ok. why? And I see it in Dreamweaver design view normal. Thank you for any help, Paul __ 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] New here!
I have just stumbled across this list and am intrigued... I am fairly new to css, and look forward to an arena where ideas can be shared.Paul -- We can't solve problems by using the same kind of thinking we used when we created them. ~Albert Einstein __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 Float Jump Bug
>> Here's the problem: Occasionally, in IE 7, the floated column jumps >> from the place it's supposed to be to overlap the main column: > Philippe said: > Instead of giving it (#sidebar) 'position:relative', have you tried to give > #page-content-with-sidebar (position:relative; zoom:1;} ? >Bill said: >I think you were on the right track. Maybe try something like this in >your css/ie7.css stylesheet: Hi Bill and Philippe, Thanks for your suggestions. I just implemented Bill's suggestion and I can't reproduce the issue so far, so I'm crossing my fingers. When I tried just #page-content-with-sidebar, the whole sidebar moved off-screen, but basically making everything relative, zoom 1 put things in the right place. Thanks! -Paul Burney http://www.concord.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/
[css-d] IE7 Float Jump Bug
Hi Everyone, Someone recently informed me about a very odd float jumping bug in one of my sites while using IE 7 (Win XP). The problem occurs on the main page of this site: http://capa.concord.org/ It's a pretty simple layout, with one main column and a sidebar floated to its left. The main column has a left margin that's a bit bigger than the floated sidebar. Here's the problem: Occasionally, in IE 7, the floated column jumps from the place it's supposed to be to overlap the main column: Good: http://capa.concord.org/images/good-ie.png Bad: http://capa.concord.org/images/bad-ie.png When this happens, one can either hit the reload button or change the window size a bit and everything falls into place like it's supposed to. Has anyone out there seen this bug? It's hard to reproduce reliably. So far I've tried giving the #sidebar position:relative (which I needed for IE6), and I've tried giving it layout with the proprietary "zoom: 1" in the ie7.css file (I'm using conditional comments to have some extra rules for IE6 and below and some for IE 7). Neither seems to fix it, though once the problem has "fixed" itself it sometimes stays that way until the computer is restarted. Any suggestions for solutions? The easiest would be to just put it in a two-cell table, of course, but that's cheating. Thanks in advance, Paul Burney http://www.concord.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] IE6 input type="image" sizing issue
Thx, that explains the issue and removing width:auto;height:auto; solves it so far. Just with the backdraw that we got to add a class to other inputs for setting the default width then. Regards, Paul 2008/5/14 Christian Kirchhoff <[EMAIL PROTECTED]>: > Hello, > > search for the thread "[css-d] Disappearing images and min-height" from > 2008-05-05. There Georg wrote: "IE6 (and older) can't auto-size images > reliably. Locally all images will be loaded so fast that there won't be > a problem, but IE6 will "time out" on most connections, and the more > images IE6 has to handle the more it'll mess up." > > I tried to examine the problem with a local copy of one of your pages. > But when tested locally, the images are a always scaled correctly. That > reminded me of what Georg wrote. Maybe it helps. > > Best regards, > > Christian > *Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin > www.digitale-bibliothek.de > AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737 > Geschäftsführer: Ralf Szymanski · Erwin Jurschitza > > > Paul Wehle schrieb: >> Hi, >> >> we got the problem that IE6 is not getting the image size of buttons >> correct when loading them first time. >> A normal refresh by F5 or Ctrl+F5 does not help either, but revisiting >> the page does. >> >> The buttons get width:auto; height:auto; from CSS, having it fixed >> isn't really an option. >> >> FF, IE7, Opera work as supposed. >> >> Issue can be seen on all input type="image" of >> http://www.godita.ffdm.de/login.php (basically on all pages of the >> domain). >> >> >> Any hints very much appreciated :) >> >> Paul >> __ >> css-discuss [EMAIL PROTECTED] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ 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] IE6 input type="image" sizing issue
Hi, we got the problem that IE6 is not getting the image size of buttons correct when loading them first time. A normal refresh by F5 or Ctrl+F5 does not help either, but revisiting the page does. The buttons get width:auto; height:auto; from CSS, having it fixed isn't really an option. FF, IE7, Opera work as supposed. Issue can be seen on all input type="image" of http://www.godita.ffdm.de/login.php (basically on all pages of the domain). Any hints very much appreciated :) Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Margin (?) issue in IE6
Yet another "it looks fine in FF but all messed up in IE" request for help, I'm afraid. I have a page generated by a "Word to Web" tool with this structure: Always h2 here etc. I've put background images on #header and #main-content-notoc and positioned them just so. In Firefox, it's as I want it. In IE6 there appears to be a 37-ish px margin at the top of #header, pushing everything down and messing the whole thing up. Link: http://www.pauljinks.co.uk/itc/literacyTest/page_01.htm CSS: http://www.pauljinks.co.uk/itc/literacyTest/cg.css Many thanks in advance - I really am not worthy. Paul Jinks __ 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] Breaking out of a div
Thanks to everyone for helping out with this
Paul
Philippe Wittenbergh wrote:
> On Apr 11, 2008, at 12:05 AM, Paul Jinks wrote:
>
>> Hi
>>
>> First the back story: I'm working at a university using a piece of web
>> authoring software called Course Genie. Teaching staff write their
>> materials in Word, hit generate and out pops the web page. Fine.
>>
>> My job is to write templates so this looks pretty, however, the html
>> leaves few hooks work with on. Basically there's
>>
>>
>>
>> Assorted other html tags
>>
>>
>> One option I'm looking at is to use the h1 element to introduce a
>> little
>> graphical flavour.
>>
>> So far so good. Here's my problem:
>>
>> I've set a background image to the h1 element, and using negative
>> margins
>> and padding etc. I'm trying to get it to 'pop' out of the containing
>> div.
>> In Firefox2 for win this works more or less as I want it to, but in
>> IE6
>> the part of the image outside the containing div cannot be seen. Any
>> solutions?
>>
>> link: http://www.pauljinks.co.uk/itc/cgexperiments/
>>
>
> The parent container 'hasLayout'. [1]
> This should work:
> h1 {position:relative; zoom:1;}
>
> [1] <http://www.satzansatz.de/cssd/onhavinglayout.html>
>
> Philippe
> ---
> Philippe Wittenbergh
> http://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/
>
>
__
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] Breaking out of a div
Hi First the back story: I'm working at a university using a piece of web authoring software called Course Genie. Teaching staff write their materials in Word, hit generate and out pops the web page. Fine. My job is to write templates so this looks pretty, however, the html leaves few hooks work with on. Basically there's Assorted other html tags One option I'm looking at is to use the h1 element to introduce a little graphical flavour. So far so good. Here's my problem: I've set a background image to the h1 element, and using negative margins and padding etc. I'm trying to get it to 'pop' out of the containing div. In Firefox2 for win this works more or less as I want it to, but in IE6 the part of the image outside the containing div cannot be seen. Any solutions? link: http://www.pauljinks.co.uk/itc/cgexperiments/ Many thanks in advance Paul -- Check out my website: http://www.pauljinks.co.uk :o) __ 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] IE8 is better but ... X-UA-Compatible response header
> Based on the "Versioning and Internet Explorer Modes" whitepaper, > making the assumption that Microsoft just kept the old IE7 Quirks > mode, it seems like we have four modes: IE7 Quirks (versions<7), IE7 > Standards (version=7), IE8 Standards (version <=8) and Best possible > (version=edge), with Best possible being the same as IE8 Standards in > IE8. Copying the table from that whitepaper: > > Common Name New Compatibility Mode Value > Quirks IE=5 > IE7 Standards IE=7 > IE8 Standards IE=8 > Best possible mode IE=edge Yes, that's essentially correct. IE=edge was added back in the days the default behaviour was going to be IE7 mode, but now that the default has switched to Best (IE8 mode, for now), the edge value has become kind of pointless. -- --- ppk, freelance web developer http://www.quirksmode.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] X-UA-Compatible - discrepancies between targeted behaviour in IE8 and actual behaviour
> >>IE8 cannot emulate IE6, only IE5 and 7.
>
>
> WTF?
>
> So IE=6 is actually the same as IE=5. Genius.
Yup. In fact, I argued for the inclusion of IE=6 for consistency's
sake. It pointing to IE5 is not perfect, but better than having
something really weird happen when you use that value.
> Of course, I believe you, but I'm having difficulty tracking down
> where Microsoft say this. Any pointers?
Not yet, but I'm 100% certain this is the case.
> >> 2. Parsing errors not replicated when targeting IE5.
> >
> >Which parsing errors exactly? The IE team is looking for such bug
> >reports right now, so a few test cases would help a lot.
>
> In the example
>
> div#parsing
> {
> ...
> background: #ffcc00;
> backg\round: #006633;
> ...
> }
>
>
> Real IE5 colours the div yellow, emulated IE5 gets carried away and
> repaints it green.
Duly noted. Don't know when I'll be able to send this on, though.
--
---
ppk, freelance web developer
http://www.quirksmode.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] X-UA-Compatible - discrepancies between targeted behaviour in IE8 and actual behaviour
> http://www.fu2k.org/alex/css/cssjunk/ie8/xua > > In a nutshell, IE8's emulation of IE6 and IE5 does not appear to be > off to a flying start. IE8 cannot emulate IE6, only IE5 and 7. > 1. Box model not honoured when targeting IE6 and in standards mode > 2. Parsing errors not replicated when targeting IE5. Which parsing errors exactly? The IE team is looking for such bug reports right now, so a few test cases would help a lot. -- --- ppk, freelance web developer http://www.quirksmode.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] IE8 is better but ... X-UA-Compatible response header
> So the meta-switch is able to take precedence over the doctype switch in > any case. Definitely! That's by design. Doctype switching will continue to work as usual; you can choose between Quirks (IE5.5) and Standard (IE8). However, any meta switch will ALWAYS overrule any doctype. > Setting the X-UA-Compatible response header has some aspects I find > remarkable. > > > or > > ... > > - content="IE=5" or content="IE=6" throws IE8b1 in quirksmode, even if > the document has a standards Doctype. > > while > - content="IE=8" or content="IE=9" ... throws IE8 in Standards-IE8-Mode, > even if there is /no/ doctype (or a quirksmode triggering doctype). > > and > - content="IE=7" throws IE8 in Standards-IE7-Mode, even if there is /no/ > doctype (or a quirksmode triggering doctype). > > > Other content like "IE=4" or "IE=nonsense" keeps IE8 in > Standards-IE8-Mode if there is a standards doctype, so I think they are > simply ignored. > > But "IE=5" or "IE=6" are not ignored, they have a meaning that is not > documented yet afaik. > > > Ingo > > -- > http://www.satzansatz.de/css.html > http://www.dolphinsback.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/ > -- --- ppk, freelance web developer http://www.quirksmode.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] Gap between divs in IE6
Hi Tim
Many thanks for this. It worked like a dream.
Incidentally, I tried putting the same CSS rules in separately:
background-image: (url...);
background-repeat: no-repeat;
background-position: bottom left;
and it didn't seem to work (yes, I'm a Dreamweaver user). Strange, eh?
Cheers
Paul
Tim Palac wrote:
> Paul,
>
> This was a frustrating one! Anyway, after much fooling I replaced the
> css for #main-top with the following:
>
> #main-top {
> height: 16px;
> width: 770px;
> background: url(...) no-repeat bottom left;
> }
>
> This works great in IE6, IE7, and Firefox for me. For some reason it
> was just IE6 the old version wasn't working in, guess it has weird
> issues with background placement.
>
> Tim
> AIM: TymArtist
> www.timpalac.com <http://www.timpalac.com>
>
> On Thu, Feb 21, 2008 at 10:21 AM, Paul Jinks <[EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]>> wrote:
>
> I've been trying to fix this till I can't remember my own name:
>
> I have a page that looks just as I want in FF but which misbehaves
> in IE6,
> showing a gap between divs.
> Link: http://www.pauljinks.co.uk/test/contentTemplate2.html
>
> I've stripped down everything to identify the offending code,
> which looks
> like this:
>
>
>
>
>
>
>
> The idea is that the content of #objective appears in a nice
> rectangle
> with rounded corners, the top and bottom of said rectangle being
> contained
> by #main-top and #objectiveBot.
>
> here's my css:
>
> body {
>margin: 0px;
>padding: 0px;
>}
>
> #container {
>width: 770px;
>margin: auto;
>}
>
> #main-top {
>height: 16px;
>width: 770px;
>background-image: url(..);
>background-repeat: no-repeat;
>}
>
> #container #objectiveBot {
>background-image: url(..);
>background-repeat: no-repeat;
>width: 770px;
>height: 23px;
>}
>
> #container #objective {
>background-image: url(...);
>background-repeat: repeat-y;
>width: 770px;
>}
> I know it's something pretty obvious, but I can't see the wood for the
> wotsits here.
>
> Please help.
>
> Paul
>
> __
> css-discuss [EMAIL PROTECTED]
> <mailto: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://evolt.org> --
> http://www.evolt.org/help_support_evolt/
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap between divs in IE6
Gunlaug Sørtun wrote:
> Paul Jinks wrote:
>> I have a page that looks just as I want in FF but which misbehaves in
>> IE6, showing a gap between divs.
>> http://www.pauljinks.co.uk/test/contentTemplate2.html
>
> The simplest and most reliable solution is to put an html comment in the
> empty divs, to prevent IE/win from seeing whitespace in there.
>
>
>
>
>
>
> IE6 will otherwise treat those divs as if they're one line-height tall,
> since that and older IE/win versions don't respect declared dimensions
> and will auto-expand the divs in height to make room for an imaginary
> space.
>
> regards
> Georg
Thanks Georg
It took me a while to get round to testing this: I found that the
comments fixed the problem in IE6, but introduced gaps in FF! I'm not
sure why this should happen. Tim Palac's approach, setting
#main-top {
...
background: url(...) no-repeat bottom left;}
did the job in both browsers. Again, I have no idea why!
Paul
__
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] Gap between divs in IE6
I've been trying to fix this till I can't remember my own name:
I have a page that looks just as I want in FF but which misbehaves in IE6,
showing a gap between divs.
Link: http://www.pauljinks.co.uk/test/contentTemplate2.html
I've stripped down everything to identify the offending code, which looks
like this:
The idea is that the content of #objective appears in a nice rectangle
with rounded corners, the top and bottom of said rectangle being contained
by #main-top and #objectiveBot.
here's my css:
body {
margin: 0px;
padding: 0px;
}
#container {
width: 770px;
margin: auto;
}
#main-top {
height: 16px;
width: 770px;
background-image: url(..);
background-repeat: no-repeat;
}
#container #objectiveBot {
background-image: url(..);
background-repeat: no-repeat;
width: 770px;
height: 23px;
}
#container #objective {
background-image: url(...);
background-repeat: repeat-y;
width: 770px;
}
I know it's something pretty obvious, but I can't see the wood for the
wotsits here.
Please help.
Paul
__
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] Drop Downs Appearing Below Flash
Can you provide a link for your page? On Jan 25, 2008, at 9:32 AM, [EMAIL PROTECTED] wrote: > Recently, it appears that drop-down navigation in FIrefox is falling > behind Flash movies, again, and the normal suggested fixes no longer > work. > Has anyone else experienced this lately? > > I have read through the previous posts: > [1] http://archivist.incutio.com/viewlist/css-discuss/94203 > > And previous fix examples: > [2] http://www.communitymx.com/content/source/E5141/wmodeopaque.htm > --> Even this one seems to be not working anymore. > > I have applied wmode="transparent", set z-index, and even tried > implementing an iFrame (as a test) to house the Flash movie below the > drop-down and the drop-down menus still go behind the Flash movie, > even > when the Flash movie is inside of the iFrame. I cannot currently > share > the iFrame example. > > I am curious, are others seeing this problem in Frefox, despite > using the > suggested fixes? When you view link [2] above, does it work as > intended? > > Your feedback is appreciated. > > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hand coders vs wsywig coders...I had no idea
On Jan 25, 2008, at 1:22 PM, Ben Fider wrote: > I could hand code all day long using only a text editor like Notepad > or > Crimson editor. > > But, I use DW's code view to build most everything, because as I > type HTML > and CSS it beautifully suggests what I begin to type and finishes it > (if I > so choose). This speeds up my coding big time. > > Furthermore, if you define you document, DW will offer suggestions > as you > type ASP, JSP, PHP too (I believe)... like Eclipse. > > But, job descriptions often read "hand coders only" which would lead > me to > deny that I use DW at all. > > Ben > > On Jan 25, 2008 12:46 PM, Scott Thigpen <[EMAIL PROTECTED]> > wrote: > >> Hi Guys, >> >> Yesterday I was up for a job to take on a big website and design >> it. They >> were real impressed with my work, everything was going well until I >> said I >> coded with the aid of Dreamweaver. Then you would have think I had >> punched >> the guy in the mouth. I mean there was not even "well we'll think >> about >> it" >> it was "we only use hand coders." I'm not above doing hand coding, >> but I >> have no earthly idea where even to start without dreamweaver >> holding my >> hand. >> >> So do most of you guys hand code? Or do you use a wsywig editor to >> help? >> It's funny, I can remember the days (pre-2000) when saying you used DreamWeaver over other tools like FrontPage meant you were a 'real' web professional as opposed to a wannbe drone. Sad, these days anyone who uses a tool like DW or Expression Engine to develop HTML/CSS, are looked upon as total posers. As a developer and a one-time manager I can let you know part of the issue. Most companies want to hire a person who know the mechanics around an unordered list for example. This knowledge is not so much how to select the option from the DW menu but instead do you really get HTML and can name the options a list item for example might have. It's about being intimate with the code being produced and using your knowledge of Web Standards and semantic markup. The areas were sadly most tools do not 100% fit. Another part of the issue is a person who uses a tool like DW generally can only function inside DW. Now this is not everyone so please no flaming. I've run across many so called developers who were so knowledgeable about how to do something in DW that they really could not function without the tool. Something as simple as looking at view source HTML code from a browser from totally foreign to them. But again they could do amazing things inside the tool. Again, I'm not calling anyone out or making assumptions on your knowledge of HTML of your general abilities. You may be very knowledgeable in the area of HTML and CSS and simple use DW under code view because you like it. Just my thoughts and maybe a little insight. Paul Menard http://codehooligans.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] denying the downloading of img
I stopped reading at the end of your first sentence. Read this: http://www.webdeveloper.com/forum/archive/index.php/t-87939.html Paul Hanson Technical Writer RoboHelp ACE - http://www.adobe.com/support/forums/team_macromedia/robohelp.html Quintrex Data Systems http://www.quintrex.com email: phanson at quintrex.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of jaklitsch maya Sent: Wednesday, December 12, 2007 1:57 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] denying the downloading of img I have a request to stop anyone from copying and downloading images from the website I am working on now. __ 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] IE6 ALAP Holy Grail Woes
I think http://www.mojotools.com/priv/tst/grail-a.html is the link ... Paul Hanson Technical Writer RoboHelp ACE - http://www.adobe.com/support/forums/team_macromedia/robohelp.html Quintrex Data Systems http://www.quintrex.com email: phanson at quintrex.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] DT, DD, in CSS
Does anyone on this list define and tags in their CSS? I am trying to make this work and I'm having a tough go at it. Basically, I want my to look exactly like my style and I want my tag to look exactly like my Body-Text style *EXCEPT* I want a hanging indent. If you have these styles in your CSS file, can you send me how you did it? I can hack it until I get what I want - I just need a baseline to get going. Paul Hanson Technical Writer RoboHelp ACE - http://www.adobe.com/support/forums/team_macromedia/robohelp.html Quintrex Data Systems http://www.quintrex.com email: phanson at quintrex.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] FW: Are table-based layouts still needed
I don't know what this is called - or if there is a solution to what I'm seeing. I'm using IE 6. I close my Favorites so it doesn't display on my screen. There is a large gap between the menu going up and down and the edge of my browser window. If I enable my Favorites and have them displaying on the left of my window and widen that to the right, I can eventually have the Favorites next to the up and down menu and the "Insert Logo" text in the title lined up. What would need to change in the existing code on this page to have the up and down menu all the way to the left edge of the browser window http://www.adobe.com/support/forums/team_macromedia/robohelp.html Quintrex Data Systems http://www.quintrex.com email: phanson at quintrex.com -Original Message- From: Al Sparber http://www.projectseven.com/csslab/faux/shadow/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Trouble with display of background in IE
Greetings all, I'm scratching my head trying to figure out why IE 7 & 6 are cutting off the first line of text in the quotes display. Here is the page http://staging.williscoatings.com/. Actually it's any page on the site since they all contain the sidebar code. The quote box appears fine in FF2. But in IE the first line is chopped. I'm sure this is some conflict with the quote box top image, http://staging.williscoatings.com/wp-content/themes/willis/images/ quote-top.png, the negative margin on the div container for the quote text and the background repeating image, http:// staging.williscoatings.com/wp-content/themes/willis/images/quote.png I'm not seeing a solutions but thought I would ask the group. the client really wants the text adjacent to the double quotes not under it. Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] printing background images
Hey all, Ive ran into a slight problem regarding printing content (text) with the background showing up. Is it possible to do so, or do I need to outright stack layers on each other with the image laying in one and the text in the other? Thanks in advance. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css organization - (divide and conquer) or not?
One thing to consider for your 3rd idea is that if you have to pass the
project off to someone else, the other two methods require the new
person to understand your logic and why you split things up into
multiple files. This could lead to frustration on their part if they
don't fully understand what is happening on the web page. Frustration
may lead to venting. Venting may lead to you getting a bad rap for using
either method 1 or method 2 after you are no longer associated with the
project. The negative connotation with the work you leave behind is very
powerful and can bite you when you don't expect it.
That said, I would choose method 3. Everything is together that controls
the .posts style so I don't have to go looking elsewhere. I think it is
the best way to do it.
Paul Hanson
Technical Writer
RoboHelp ACE -
http://www.adobe.com/support/forums/team_macromedia/robohelp.html
Quintrex Data Systems http://www.quintrex.com
email: phanson at quintrex.com
-Original Message-
From: Arian Hojat
#Method1 - have to change across 3 files //color.css .posts{ color:
orange; background-color: black;} //typography.css .posts{ font-size:
1em; font-family:Verdana, Arial, Helvetica, sans-serif; } //layout.css
.posts{ float:left; width: 200px; }
#Method2 - have to change 1 files, organized /*Colors */ .posts{ color:
orange; background-color: black;} /*Typography */ .posts{ font-size:
1em; font-family:Verdana, Arial, Helvetica, sans-serif; } /*Layout */
.posts{ float:left; width: 200px; }
#Method3 - have to change 1 files, un-organized .posts{
color: orange; background-color: black;
font-size: 1em; font-family:Verdana, Arial, Helvetica, sans-serif;
float:left; width: 200px; }
I was wondering what is best, for a quick job, i'd probably do #3; but
for a big job I wasn't sure what people have figured is best?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] white or #FFFFFF?
My suggestion on the matter: stick with hex colors. While I have yet to see a hard and or fast rule on the matter (it may be a preference), I generally try to stick to hex colors. Tx __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] "Weak" layout
At 6/6/2007 09:57 PM, David Laakso wrote: >A good structural test for a layout is that it should hold without >breaking, overlapping, or float dropping at +2 font-zoom in the Gecko >browsers. I've never understood the sense of that criterion, e.g. "the page should survive two [or three] font size enlargements." Doesn't that depend entirely on what size the smallest font on the page is? If my vision were so weak that I needed to enlarge text to 1/2-inch type on the screen, it wouldn't matter whether that required one click or ten, I'd still need it to become that large. It's not the number of enlargements that's relevant, it's the size of the resulting type. Let me know if I'm missing something there. What I don't know is if there's any kind of a minimum font size that we should ensure our readers can achieve. I doubt that there is one, given the variation in vision impairments, but I'll be curious to know what others think. I apologize if this is considered to be off-topic; it's an accessibility point, but in my mind very pertinent to styling. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] two variable width divs side by side
"Rory Fitzpatrick" wrote: > Try this out for size: > > > > That's the way it looks >without tables > > > > > > 11 > 22 > > > > > Maybe I have stripped my example a bit too much :-) Your solution works only with that simple example. The "real thing" has a background image attached to the right column. (please look at the extended sample here http://paul-sommer.de/test/tablefree.html ) Expanding that image to the left side is not a solution as the menu column grows if the user enlarges the font size (Ctrl + in firefox). The menu column must be sized with em (I think). Otherwise the text runs out of the box if the user enlarges the text. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] two variable width divs side by side
"Rory Fitzpatrick" wrote: > Try this out for size: > > > > That's the way it looks >without tables > > > > > > 11 > 22 > > > > > Maybe I have stripped my example a bit too much :-) Your solution works only with that simple example. The "real thing" has a background image attached to the right column. (please look at the extended sample here http://paul-sommer.de/test/tablefree.html ) Expanding that image to the left side is not a solution as the menu column grows if the user enlarges the font size (Ctrl + in firefox). The menu column must be sized with em (I think). Otherwise the text runs out of the box if the user enlarges the text. > > If you want to increase the space between the divs simple increase the > margin-left value (108px - this allows for the 100px width + total 6px > margin + 2px of border). > > Hope this helps > > Rory > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7 information -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Sei nicht verzweifelt, wenn es ums Abschiedsnehmen geht. Ein Lebewohl ist notwendig, ehe man sich wiedersehen kann. Und ein Wiedersehen, sei es nach Augenblicken, sei es nach Lebenszeiten, ist denen gewiß, die Freunde sind. -- Richard Bach __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] two variable width divs side by side
Hi, I have a "simple" problem that I try to solve now for almost 3 weeks (not 8 hours a day but long enough) Simple, because it is solves within 5 minutes when using tables, but it seems to be impossible to do it table free. Please proof me wrong. :-) The page consists of two columns. The left column should contain a menu and has a fixed width. the right column contains a table with data from a database. The user can choose, which information of the database he wants to see. So it is obvious that the table (ans thus the right column) has a variable width. Everything works fine until the outer div reaches the right edge of the browser window. Then the right column will be placed beneath the menu instead of right from it. This is my code so far (stripped to a minimum): That's the way it looks impossible without tables? 11 22 You can see the test page here (shrink your browser windows to see the effect) http://paul-sommer.de/test/tablefree.html This example also contains a tabled layout to show the intended behaviour. The table also shows the wanted colouring which also seems impossible with DIVs. I wonder why people are encouraged not to use tables when the alternative solution is that painful and time consuming (not to speak at all about the browser incompatibilities) Please help me, as I'm totally frustrated and considering giving up table free layout. Thanks in advance Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hover technique
At 5/22/2007 10:15 AM, Mauricio Samy Silva wrote: >I hosted a test case showing a possible solution: >Please, look at: http://www.maujor.com/temp/css-d/hover-effect.html Mauricio, this technique as you've used it here doesn't survive text-resizing, but it looks like that can probably be corrected by setting block heights in ems to prevent them from colliding. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS instead of a table
I am the worst offender for tables in HTML. In my documentation, it is laid out in a two column table. The left column has headings, like "Purpose," "Navigation," and "Authority." The right column contains the "information" about the heading in the left column. Because it is tabular information that I need to convey, in my opinion, a table is apporpriate. Don't feel guilty - just use common sense when trying to decide the best way to present your information. If you have a calendar or a table, use a table on your web page. If you are trying to make the page line up in a specific way and determine that you could do the page in a two column table to get the layout you want - I think, if I understand the pro-CSS/anti-table group correctly - that is when to think about using CSS. Paul -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Tuesday, May 22, 2007 6:00 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] CSS instead of a table "Paul Hanson" <[EMAIL PROTECTED]> Re: [css-d] CSS instead of a table > I think you have a misconception. Tables are "supposed to [be] > despise[d]" when they are used to control layout. When they are being > used to present actual tabular data, in my mind, a table is the way to > go. As far as the "simpler and more readily maintainable" element of > your post, I would use a WYSIWYG view of the HTML to make it easier to > work with. I would probably not venture into the true code unless I > was troubleshooting something. Aha! Have I been too dramatically impressed by books such as "HTMLUtopia: Designing without Tables using CSS" from Sitepoint? I have "felt guilty" in using tables. Bruce __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS instead of a table
I think you have a misconception. Tables are "supposed to [be] despise[d]" when they are used to control layout. When they are being used to present actual tabular data, in my mind, a table is the way to go. As far as the "simpler and more readily maintainable" element of your post, I would use a WYSIWYG view of the HTML to make it easier to work with. I would probably not venture into the true code unless I was troubleshooting something. I don't remember if it was on this list or another one where someone wanted to take a calendar and make it CSS. The general consensus was that a calendar was a suitable 'thing' to present as a table. I pasted your code into Dreamweaver and viewed it in IE 6. I think, in my opinion, your code is suitable for a table as well. Paul Hanson Technical Writer RoboHelp ACE - http://www.adobe.com/support/forums/team_macromedia/robohelp.html Quintrex Data Systems http://www.quintrex.com email: phanson at quintrex.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Tuesday, May 22, 2007 3:59 PM To: css-d@lists.css-discuss.org Subject: [css-d] CSS instead of a table Here is the code for an extremely simple web page constructed with the use of a table. I would like to make it simpler and more readily maintainable, but I don't know where to start in duplicating it with CSS, avoiding the use of a table, which we are supposed to despise. Does anyone feel inclined to play the instructor and show me how to make it more reliable and easier to maintain? Many thanks for any help. Bruce __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
