Re: [css-d] Scroll bar in IE6 not in FF
[EMAIL PROTECTED] wrote: > My site www.boxdproductions.co.uk gets an unsightly vertical scroll bar in > IE but not in FF. Any ideas how I can remove this? > > Regards > Pete > > As far as I know you can only get rid of it by using overflow-y: hidden on the body but it's a bad idea because then you can't scroll up or down at all unless you add a wrapper div around the whole lot with width and height 100% and overflow:auto;. The scrollbar is there by default in IE regardless of page length so I don't think any of your visitors using that browser will care or even notice. Saying that though it's important that you're happy with it too so err, yeah, do as you see fit. Rob __ 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] FOUC of a new kind
Rakesh Pai wrote: > Consider the following markup: > > > ... header stuff here > > > > ... lots of markup > > > > ... lots of markup > > > > ... Some footer stuff > > > > Now, let's assume that the #leftColumn is floated left, the > #rightColumn is floated right, and the #footer clear:both the floats. > Also, as per the design, the body has a black background, and some > wrapper for this markup has a light patterned background. > > The problem is that until the footer is loaded in the markup, the > content in the leftColumn and rightColumn is unreadable since the > floats are not cleared making the background black. If the amount of > markup in the left and right columns is a lot, there's a perceivable > delay in loading the footer, making the page unusable till that time. > > Is there a solution to this problem? Colleagues are suggesting that I > use tables to ensure that the background is available, but I don't > like the idea. Note that I cannot give the left column and the right > column a background, since I need the pattern to show up through them. > > This is very urgent, so speedy responses will be greatly appreciated. > > You could always use a min-height so that the wrapper takes up some vertical space with its background showing up straight away, alternatively do you have overflow: hidden; set on the wrapper? That would make it wrap the floats straight away. The other suggestion I have is that it's not your problem at all but the speed of the software. Too often I have people hounding me because of how a site loads up but the problem is down to slow software. You can't fix that with css. You can only make it less obvious. Rob __ 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] Ideas for handling text with CSS
[EMAIL PROTECTED] wrote: > Hi everyone, > > I was wondering if anyone has a link or information as how to best handle > text with CSS. By text I mean a line of text that may include 3 pieces of > information, like name, phone, and email address. > > In the past, I always used tables for this, but want to handle this with > the use of CSS if possible. > > I found a site that mentioned word-spacing, but that won't work because I > don't want a large amount of spacing between the first and last name. > > Any suggestions or links are greatly appreciated. > > Thanks! ;-) > > Suzanne > Hi Suzanne, I sometimes use one of a few methods for formatting snippets of inline data. For a one liner it's not a job for a table really unless you do a row of headers and a row of values. I know it's probably not semantic and-all-that but I have two examples here: http://www.sanchothefat.com/dev/inlinedata.html The first is a definition list (i just like it as a means of grouping key-value type information but there's a whole debate on the use of them that I'm not sure what the consensus is, probably best avoided to circumvent opening the debate again). The second example is the same thing achieved with a div and spans. Pretty straight forward to style it how you want. Rob __ 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] Ideas for handling text with CSS
[EMAIL PROTECTED] wrote: > Wow, thanks to EVERYONE who responded to this!! I should have given you > more info. > > This is a page for the client's board members/commissioners. There is a > single line above each photo and bio that contains: > > LastName, FirstName MiddleInitial PHONE: 999-999- EMAIL: > [EMAIL PROTECTED] > > While I personally think that tables are ok with the right circumstances, I > don't think this is. Also, the client will be managing all of the content > via Contribute, so I want to keep this as clean and easy as possible. > > I had already created a class and used a around the entire line to > make it inline, and another class to make the titles bold. Then, I just > used breaking spaces (a number of them) to provide the right spacing > between the name and phone, and between the phone and email. But as a LONG > time WordPerfect user, I can hardly stand the thought of using multiple > spaces and felt that surely there was a way to handle this with CSS. > > Hope this explains things more clearly > > Suzanne > > You can use left and right padding or margin on those inline elements instead of nbsps. Seems like it would be a more surefire way of displaying those details if they're coming from database fields. Did you get my example url? Have a play anyway but it seems like spans are well suited to this task. The only other thing I can as being an issue for you is where the information that comes out is different lengths. eg. name: FirstName... phone: ... name: LongerFirstName... phone: ... name: Name... phone: ... that effect could only really be achieved inline using float: left; as inline elements won't take a width... Alternatively: name: FirstName... phone: ... name: LongerFirstName... phone: ... name: Name... phone: ... If thats acceptable then its very simple to achieve. Is it the top example or bottom example you're going for? Rob __ 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] Best way for text when enlarged
Rick Faircloth wrote: > What establishes the baseline size of 100% ? > Do all browsers use the same baseline size? And do all > browsers react to percentages the same? > > Rick > > -Original Message- > From: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] On Behalf Of Luc > Sent: Wednesday, June 20, 2007 4:03 PM > To: trevor on css-discuss > Subject: Re: [css-d] Best way for text when enlarged > > Good afternoon trevor, > It was foretold that on 20/6/2007 @ 12:09:17 GMT-0700 (PDT) (which was > 16:09:17 where I live) trevor bayliss would write: > > > > >> On the body part of the css at the moment it is font 11px -what >> should I change it to some percent value? >> > > I use a minimum of 76%. > > > There is a good argument for setting the font-size on the body tag to 100% every time, it sets a base level for the font-size that is readable to most everyone and won't affect people who have their minimum font-size set to anything other than the default. As for the rest of the text e.g. the text in paragraphs and headings and so on you can set their font-sizes relative to the body default using ems or %. There are some differences between browsers though not a lot, it's rarely an issue for me so I haven't really looked into it fully. Check out Eric Meyer's CSS reset reloaded: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ It's a great place to start as all your styling, especially in terms of typography as the majority of browsers will then have the same starting defaults and you can set your font-sizes to your hearts content on the elements that need it. You do need to explicitly specify every bit of styling you need so you can't rely on the old browser defaults if you do this but on the plus side you know exactly where you stand to begin with. Rule of thumb is to avoid fixed px sizes on fonts in general as they wont be resizable in <= IE6. Rob __ 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] Any consensus on reset css?
David Hucklesby wrote: > On Wed, 20 Jun 2007 23:04:55 -0400, Scott Glasgow wrote: > >> There seems to be a good deal of contention, or at least spirited >> discussion, on the >> value or advisability of using reset stylesheets >> (http://www.webmasterworld.com/css/3329010.htm). I'm just getting back into >> this and >> I'm curious if there is any consensus here on the advisability of using this >> method, >> and if so, whether the YUI or the Meyer (or some other) approach is >> considered "best." >> Personal preference I guess, one approach might suit you better. Eric Meyer's is more of a 2-step process I think whereas the YUI one gives you a fresh set of defaults similar to browser defaults (as far as I know, I don't use YUI stuff). >> Also, if one were to adopt this method and use an externally linked reset >> stylesheet along with the custom stylesheet for a site, how would the >> linking be handled? >> If you're importing the stylesheet you can add an @import rule to the top of the stylesheet to include this, depends on which method you need to use. Whichever way you link to it it should come first before the other stylesheets. > > Hi Scott, > My reading of Eric Meyer's "universal reset" is rather different. > > I believe he uses this "neutralizing" CSS to make sure that all > required properties are added back later. This way, no element > winds up with browser-applied properties, any of which may differ > from browser to browser. > > If I understand this correctly, you would take out the "reset styles" > when done, leaving you with a document with no style left to the > whim of a particular browser. > I thought it was a means of giving yourself a starting point, if you took it out later wouldn't it throw a bunch of things out of line between browsers? Say in IE it's default font-sizes for headings are bigger than in Mozilla, if you're setting that font-size relative to the reset stylesheet... Form controls spring to mind aswell, those things are a pain in the backside cross-browser. You raise a good point though. It'll be an interesting experiment to remove the reset stylesheet from my next project after it's done. Rob __ 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] Wordpress theme floats and footers
ByteDreams wrote:
> I'm working on my very first WP theme.
> Everything is inside a #wrapper which is underneath the body tag
> Then I have the following structure:
> #header
>
> body{
> top: 0;
> margin: 0;
> font-family:Arial, Helvetica, sans-serif
> font-size:10px;
> }
>
> #header{
> display:inline;
> position:fixed;
> z-index: 100;
> left:0px;
> width: 100%;
> top:0px;
> background:url(images/background.png);
> background-color: #000;
> -moz-opacity:0.9;
> filter:alpha(opacity=90);
> /* line-height: 1.2em; */
> }
> #container{
> position:absolute;
> top: 125px;
> left: 280px;
> width: 550px;
>
> }
> #sidebar1{
> position:absolute;
> float:left;
> left: 0;
> top: 125px;
> }
>
> #footer{
> padding: 0;
> width: 100%;
> clear: both;
> }
>
> I plan to add another sidebar for a three-column layout, and widgetize the
> sidebars, but haven't added the second sidebar yet.
> What I'm having trouble with right now is the footer which is the last div
> in the html, goes all the way to the top. I'm not sure I understand how to
> get that footer to rest at the very bottom.
>
> Please help.
> Thanks,
> ByteDreams
>
Hello,
The problem is you've used absolute positioning and a float. You
have to choose whether to use floats or absolute positioning for the
main layout because they won't play together in the way you're
attempting. You can either absolutely position the footer to the bottom
of the page or you can get rid of position absolute on #container and
#sidebar1 altogether to allow that clear: both; to work.
It'd be easier to explain if you have a test page uploaded somewhere
or if you can provide the html outline...
Rob
__
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] Wordpress theme floats and footers
ByteDreams wrote: > Thank you. > I've temporarily loaded the theme on my site. It's now worse than it was - > than it appeared offline. For instance I had gotten the dock menu working > and in the middle, now its back on the left. > I don't know what happened now. I can't see straight anymore. > I have the fixed header set to a percentage of the transparency so I could > see if anything was hiding underneath, and sure enough, my footer is there > at the top. > > > Whats the url of your site? (forgetting to inlcude it happens to the best of us =] ) Try not to worry about it. What you're going to learn now is how positioning and floats work. I'll try and start simple with the concepts, *document flow:* this is the default flow of an html document, by that i mean the way block elements like div and p stack under each other and inline elements like span or strong wrap part of a line of text. By the use of floats and position: absolute we remove an element from this 'normal flow'. *floats:* these put an element into the 'float flow' which can still affect the 'normal flow'. Elements in the 'normal flow' will flow around floated elements. The typical example is floating an image so that text wraps to the side and underneath it. *position: absolute:* this completely removes an item from the 'normal flow'. Elements outside of this item will not be affected by its size or position. This is why you cannot use position absolute and floats on the same element. You can position these relative to their containing element. So if you have a div under the body and position it absolutely it will be positioned relative to the body. If you apply position relative to an element and have an absolutely positioned element inside that then it will be positioned relative to that element and not the body. There's a lot more to it but I hope that helps to explain some things. David Laakso sent you a link to some layouts that you can use to make your own and get started. There are some tricks to float layouts. This tutorial will explain a simple two-column one and helped me get started: http://www.alistapart.com/articles/negativemargins/ When you can understand that google for '3 column float layout' or something to that effect and read up a bit on what comes up. The concepts and techniques will eventually start to click you just have to stick at it. Also if you can get an ftp client then set yourself up a sandbox folder on your website for testing layouts and so on before trying them out your site. Hope that's some help Rob __ 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] at import loading
Gate Wizard wrote: > question > How does a browser handle @import? > > Example: > in HEAD we have: > > > > - > main.css > /* */ > > Does the browser load the imported CSS before it starts rendering the page, > or after? > > I've looked here, but it doesn't seem to answer my question: > http://www.w3.org/TR/css3-cascade/#at-import > > Thanks to all replies in advance. > > http://archivist.incutio.com/viewlist/css-discuss/76444 That thread may help but also says at the bottom it's off-topic for css-d. Rob > > > __ 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] ordered lists in ie - is more than 10 items asking too much?
Hello, I didn't have much luck with google on this one so I've put together a demo page: http://www.sanchothefat.com/css/bugtests/ie/ol.html For some strange reason if you set 'list-style-position' to 'inside' on an ordered-list from the tenth list-item onwards the text-indent it creates for the bullet/number is lost. This is not the case for an unordered-list. I've tried a couple of hasLayout triggers like position: relative; and zoom:1; to no avail and also text-indenting the li but nowhere near a fix yet. Any ideas? I thought I'd bring this to your attention as a point of interest anyway even if no fix exists. Perhaps this is just one to avoid. Cheers, Rob __ 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] ordered lists in ie - is more than 10 items asking too much?
Just realised, it's not giving any extra room for the extra digit when you reach list-item number 10. Guess it's something I'll have to live with __ 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] ordered lists in ie - is more than 10 items asking too much?
Luc wrote:
> Good afternoon Robert,
> It was foretold that on 30/10/2007 @ 18:59:25 GMT+ (which was
> 15:59:25 where I live) Robert O'Rourke would write:
>
>
>
>
>> For some strange reason if you set 'list-style-position' to 'inside'
>> on an ordered-list from the tenth list-item onwards the text-indent it
>> creates for the bullet/number is lost. This is not the case for an
>> unordered-list.
>>
>
>
>> I've tried a couple of hasLayout triggers like position: relative;
>> and zoom:1; to no avail and also text-indenting the li but nowhere near
>> a fix yet. Any ideas?
>>
>
> decimal outside with padding seems to get IE in it's place:
>
> ol {
> list-style: decimal outside;
> border-top: 1px dashed #ccc;
> padding: 0 20px;
> margin: 16px auto;
> width: 90%;
> }
>
> http://www.dzinelabs.com/sandbox/list.html
>
>
>
Yeah that'll work, it would've been good though, I was using a
background image for list-items in ordered and unordered lists so the
list-style-position: inside looked nice.
Thanks for the link,
Rob
__
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] ordered lists in ie - is more than 10 items asking too much?
Jens Brueckmann wrote:
> Hi Robert,
>
>
>> Just realised, it's not giving any extra room for the extra digit when
>> you reach list-item number 10. Guess it's something I'll have to live
>> with
>>
>
> you may add whitespace between the list numbers and the first
> character by adding left padding to the first letter, e.g.:
>
> ol li:first-letter { padding: 0 0 0 1em;}
>
>
> Cheers,
>
> jens
>
Genious, thankyou very much Jens
__
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] Hey, I'm new to the list...
Jon Hughes wrote: >> I thought I'd say hi.. I'm Matt Lee, Campaigns Manager at the Free >> Software Foundation, and Chief Webmaster for the GNU Operating System. >> >> I've been using CSS now for about 3 or 4 years, and while I'm not >> > really > >> a designer, I'm extremely interested in seeing new examples of good >> > CSS > >> design. >> >> Cheers, >> >> matt >> > > > Hi Matt, welcome to the list! > > There are all sorts of CSS galleries if you are interested in just > seeing what else can be done. My first recommendation is always > http://www.csszengarden.com/ through - Dave Shae has just started > approving new designs (from a several-year lull) and there's some really > creative stuff in there. > > Anyhow, enjoy your stay! > > - Jon > Hi Matt and welcome, I'm not a fequent flyer on the list but I had to share this link, it came up on www.webcreme.com which is more of a design gallery than CSS gallery but nonetheless. The site in particular is http://www.volll.com, it's just beautifully done and a really good concept. Good luck with fsf.org Rob __ 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 Bottom - Lets Keep Them Apart
Ian Rutgers wrote: > I have been charged with rewriting this www.aslslimited.org such that > the top nav stays at the top of the page and the bottom nav stays at the > bottom of the page and the content makes up the rest. In other words as > the browser window is resized the content section of the site is the > only fluid portion of the site. > > > > My preference is to write the code using divs but need some guidance on > the positioning without using JavaScript (if that is possible as I am > assuming that I would have to do some browser detection) . help what > have I got myself into?! > > > > Ian > Hi Ian, This link may help, make sure to read the limitations at the bottom then have a play with position: fixed; in modern browsers. http://divinentd.com/experiments/emulating-position-fixed.html It's worked well for me so far.but does require some IE hacks, depending on your design. __ 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] styling for two monitors
>> On my 2 monitor setup, it works just fine. Just for reference it's a >> iMac 19" with a 19" sony trinitron external monitor with a hack to >> enable the desktop extension (Didn't come that way from the factory... >> Just desktop mirroring.) >> >> The only way I can reproduce what you are talking about is if I >> actually stretch the browser screen across both screens end to end... >> Which then it centers really well in the middle of both monitors which >> is what I would expect. >> > > > Jason, thanks for looking at this for me. > > Is it possible to restrict the site to a single monitor? Or shall I tell > my guy to just shrink his great big browser window? > > Sandy > Argh! Clients! Sounds like he has his monitors set to be one big desktop and he has the browser maximised... Should be able to just set one monitor to be an extension of the desktop as opposed to part of it. If you get me. Point him to google if he still doesn't get it. You have my sympathy... Rob __ 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] Font name
Mário Gamito wrote: > Hi, > > Does anyone know the font name that is used in this picture ? > > http://www.absinto.org/einstein.010.png > > I'd like to use it in a site, but I can't figure out what it is. > > Any help would be appreciated. > > Warm Regards, > Mário Gamit If you cut out the bit of the image with the text and go to http://www.myfonts.com/WhatTheFont/ , you can upload it and it does a pretty good job of working out what font it is. -Rob __ 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] I give up with IE
Ray Pello wrote: > Hullo, > > I have a problem. THis site : www.reginagarde.com > looks OKAY to FF but when it comes to ie : when it gets to the product > details page (such as : http://www.reginagarde.com/store/show/D231) > The layout of the footer got screwed. > > ... > Can anyone help? > > - Ray > Ombilic > > Hi Ray, Check out a different technique: http://ryanfait.com/sticky-footer/ Position absolute doesn't always work as expected in IE6 :( -Rob __ 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] IE Password Field
MEM wrote:
> AHH!
>
> The password input field it's automatically shorter in IE.
>
> If we put both input fields with the type: text. All works fine.
> If We put two text fields, one with type: text. Another with type:password,
> this one get's shorter.
>
> Is there a way to stop IE from doing this mess?
>
>
> Thanks a lot,
> Márcio
>
Try using the 'size' attribute or setting the same width on both inputs
via CSS eg:
input { width: 14em; }
Also padding and border will affect the width of an input so make sure
those are consistent.
-Rob
__
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] IE Password Field
MEM wrote:
>> -Original Message-
>> [EMAIL PROTECTED] On Behalf Of Robert O'Rourke
>> Sent: terça-feira, 9 de Dezembro de 2008 10:46
>> To: Luc on css-discuss
>>
>> MEM wrote:
>>
>>> AHH!
>>>
>>> The password input field it's automatically shorter in IE.
>>>
>>> If we put both input fields with the type: text. All works fine.
>>> If We put two text fields, one with type: text. Another with
>>>
>> type:password,
>>
>>> this one get's shorter.
>>>
>>> Is there a way to stop IE from doing this mess?
>>>
>>>
>>> Thanks a lot,
>>> Márcio
>>>
>>>
>> Try using the 'size' attribute or setting the same width on both inputs
>> via CSS eg:
>>
>> input { width: 14em; }
>>
>> Also padding and border will affect the width of an input so make sure
>> those are consistent.
>>
>> -Rob
>>
>>
>
>
> Thanks Rob, we have post more or less at the same time. But I've chose pixel
> units.
> I will change the values to em instead of pixel.
>
No problem :)
The units you use are up to you, it's just important to know the
different advantages and disadvantages of each. Using ems is my personal
preference because of the way I style most of my forms with extra space
next to the inputs. I typically add a max-width in % aswell to stop the
inputs from poking out of my layout.
-Rob
__
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 Collapsing down to the html element itself
Hi all, I've been working on a site and just at the stage of tidying up the CSS however I have a strange problem with margin collapsing. It looks like there is some unwanted margin on the HTML element itself which is really confusing me. I've been trying all sorts to fix this problem. Putting a border on the BODY tag made that border encroach into the unwanted margin at the bottom of the page but not remove it. I'm at a loss here. The page is at http://www.sanchothefat.com/dev/tc/ and the unwanted space is at the bottom of the page in the latest Firefox and Opera but not in Safari or Chrome. I'm still working on some IE fixes, it's the margin issue I want to eliminate in FF and Opera for now. Please help! -Rob __ 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 Collapsing down to the html element itself
Els wrote:
> Robert O'Rourke wrote:
>
>> I've been working on a site and just at the stage of tidying up the
>> CSS however I have a strange problem with margin collapsing. It
>> looks like there is some unwanted margin on the HTML element itself
>> which is really confusing me. I've been trying all sorts to fix
>> this problem. Putting a border on the BODY tag made that border
>> encroach into the unwanted margin at the bottom of the page but not
>> remove it. I'm at a loss here. The page is at
>> http://www.sanchothefat.com/dev/tc/ and the unwanted space is at
>> the bottom of the page in the latest Firefox and Opera but not in
>> Safari or Chrome. I'm still working on some IE fixes, it's the
>> margin issue I want to eliminate in FF and Opera for now.
>>
>> Please help!
>
> Some script is inserting an image below div#wrap:
> src="/dev/tc/wp-content/themes/treecarving/gfx/green-loady.gif"/>
>
> This image has a style set too, on line 703 of your style.css:
> #l {
>left:-999px;
>position:absolute;
> }
>
> Even though it's sitting 999px to the left of the screen, it's still
> taking up its height.
> If you also give it a negative top value, it wouldn't.
>
That will be it then! Thanks so much for your speedy help.
-Rob
__
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] lis and nested anchor tag background image problem
Hello,
I'm creating a template that lists out product categories as a
floated grid. The problem is i want each to have a background-image
of a picture frame and the nested tag to have a background-image
that sits underneath the frame. I've tried z-indexing with no luck but
the only solution i've come across is to put the frame image on the
tag and the actual category image on the .
This isn't ideal but if no-one can think of a better way it isn't
the end of the world.
Here's the css:
/* picture frames */
#categories li {
z-index: 10;
float: left;
width: 150px;
height: 150px;
margin: 0 10px 10px 0;
}
#categories li a {
display: block;
z-index: 5;
width: 150px;
height: 150px;
}
#categories li a:hover {
width: 150px;
height: 150px;
}
.frame1 {
background: url(pix/frames/frame1.gif) no-repeat;
clear: left;
}
.frame2 {
background: url(pix/frames/frame2.gif) no-repeat;
}
.frame3 {
background: url(pix/frames/frame3.gif) no-repeat;
}
.frame4 {
background: url(pix/frames/frame4.gif) no-repeat;
clear: left;
} /* etc... */
And here's the html:
Gilt Mirrors &
Lamps
Oak & Country
Furniture
Regency
Collection
Chateau
Collection
Fine English
Furniture
Fireplaces
Leather
Furniture
Modern Design
Fingers crossed anyway, cheers.
Robert O'Rourke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE trouble, a tags refusing to display bottom border on hover
Hi there, I'm having trouble with some links, I've given them a bottom border that's hidden and then displays on hover. There are some similar links on the page however (#categories) where i have set the bottom border to 0. For some reason this is being picked up by the links in my navigation (#nav). The site is at http://www.thebusinesscommunity.co.uk/templates/westpennine/ There is an example of the effect i want that does work on the page, the 'contact us' link at the bottom. Rendering is spot on in FF (haven't checked Opera yet). If anyone could take a look or has had a similar problem I'd be grateful for any insights. Cheers, Rob O'Rourke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css vertical menu that expands down
Just use nested lists in the normal flow with something like the
suckerfish dropdowns. Also see the article at a list apart,
http://www.alistapart.com/articles/dropdowns/ if you get stuck.
just give your nav an id of #nav and put this script in your header:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; iAny recommendations on a CSS menu that can be configured to expand down,
>pushing other menu items down, so that don't cover the subsequent items?
>
>__
>css-discuss [EMAIL PROTECTED]
>http://www.css-discuss.org/mailman/listinfo/css-d
>IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
>List wiki/FAQ -- http://css-discuss.incutio.com/
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I also have a problem with background color change on hover
Hi Joan,
You get all kinds of problem when you're changing font-size on hover
but the problem lay in basic.css, you had a padding-top of 4px on all
s. This css works for FF, not sure about IE but i can't see that it
would be any different:
ul#nav li {
float: left;
height: 27px;
background-color: #AADFE0;
margin: 1px 1px 0 1px; /* this controls the space between tabs */
border: 1px solid #59C0C3;
border-bottom: 0;
padding: 0; /* reset the padding */
}
ul#nav a:link, ul#nav a:visited {
display: block;
color: #BE32FE;
background-color: transparent;
text-decoration: none;
padding: 4px 15px;
height: 19px; /* fix the height to avoid it spilling downwards */
}
Hope that solves the problem.
Robert O'Rourke
Joanie Mae wrote:
> I also have a problem with background color change on hover, and the
> fix for the problem K. Wilcox had did not work for me.
>
> Perhaps someone can tell me what it is I am not doing correctly. The
> hover on this site: http://www.changeswlc.com covers horizontally, but
> not vertically.
>
> My navigation code:
>
> ul#nav {
> list-style-type: none;
> margin: 0;
> padding-left: 20px;
> padding-bottom: 24px;
> font: bold 90% verdana, arial, sans-serif;
> }
>
> ul#nav li {
> float: left;
> height: 21px;
> background-color: #AADFE0;
> margin: 1px 1px 0 1px; /* this controls the space between tabs */
> border: 1px solid #59C0C3;
> border-bottom: 0;
> }
>
> ul#nav a:link, ul#nav a:visited {
> display: block;
> color: #BE32FE;
> background-color: transparent;
> text-decoration: none;
> padding: 4px 15px;
> }
>
> ul#nav a:hover {
> background-color: #BE32FE;
> color: #F3F7D4;
> font-weight: bold;
> font-size: 100%;
> }
>
> body#home li.home, body#about li.about, body#tour li.tour,
> body#contact li.contact, body#faqs li.faqs, body#coupons li.coupons,
> body#members li.members {
> border-bottom: 1px solid #fff;
> color: #59C0C3;
> background-color: #FF;
> }
>
> body#home li.home a:link, body#home li.home a:visited,
> body#about li.about a:link, body#about li.about a:visited,
> body#tour li.tour a:link, body#tour li.tour a:visited,
> body#contact li.contact a:link, body#contact li.contact a:visited,
> body#faqs li.faqs a:link, body#faqs li.faqs a:visited,
> body#coupons li.coupons a:link, body#coupons li.coupons a:visited,
> body#members li.members a:link, body#members li.members a:visited {
> color: #59C0C3;
> font-weight: bold;
> background-color: #FFF;
> }
>
> I can always just remove the background on the hover, only showing a
> change on the font color, but I would really like to know what is my
> problem for future projects.
>
> Thanks.
> Joan
>
> _
> Don't just search. Find. Check out the new MSN Search!
> http://search.msn.click-url.com/go/onm00200636ave/direct/01/
>
>
>
>__
>css-discuss [EMAIL PROTECTED]
>http://www.css-discuss.org/mailman/listinfo/css-d
>IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
>List wiki/FAQ -- http://css-discuss.incutio.com/
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I also have a problem with background color change on hover
Hi Joanie
Thats a very odd one, but i've figured it out. I'm not sure why exactly
but you have float the tags themselves left aswell ie:
ul#nav li a:link, ul#nav li a:visited {
display: block;
color: #BE32FE;
background-color: transparent;
text-decoration: none;
padding: 4px 15px;
height: 19px;
float: left;
}
Job done =)
Rob
Joanie Mae wrote:
> It took your fix and the Dieringer fix for it to work... HOWEVER,
> only in Firefox and Netscape. In IE the navigation has gone vertical
> and each tab goes across the page. I loaded it online...
> http://www.changeswlc.com. What is with that???
>
>
>> From: Robert O'Rourke <[EMAIL PROTECTED]>
>> To: Joanie Mae <[EMAIL PROTECTED]>
>> Subject: Re: [css-d] I also have a problem with background color
>> change on hover
>> Date: Wed, 29 Mar 2006 17:28:14 +0100
>>
>> Hi Joan,
>>
>>You get all kinds of problem when you're changing font-size on
>> hover but the problem lay in basic.css, you had a padding-top of 4px
>> on all s. This css works for FF, not sure about IE but i can't
>> see that it would be any different:
>>
>> ul#nav li {
>> float: left;
>> height: 27px;
>> background-color: #AADFE0;
>> margin: 1px 1px 0 1px; /* this controls the space between tabs */
>> border: 1px solid #59C0C3;
>> border-bottom: 0;
>>padding: 0; /* reset the padding */
>> }
>>
>> ul#nav a:link, ul#nav a:visited {
>> display: block;
>> color: #BE32FE;
>> background-color: transparent;
>> text-decoration: none;
>> padding: 4px 15px;
>>height: 19px; /* fix the height to avoid it spilling downwards */
>> }
>>
>>Hope that solves the problem.
>>
>>Robert O'Rourke
>>
>> Joanie Mae wrote:
>>
>>> I also have a problem with background color change on hover, and the
>>> fix for the problem K. Wilcox had did not work for me.
>>>
>>> Perhaps someone can tell me what it is I am not doing correctly. The
>>> hover on this site: http://www.changeswlc.com covers horizontally,
>>> but not vertically.
>>>
>>> My navigation code:
>>>
>>> ul#nav {
>>> list-style-type: none;
>>> margin: 0;
>>> padding-left: 20px;
>>> padding-bottom: 24px;
>>> font: bold 90% verdana, arial, sans-serif;
>>> }
>>>
>>> ul#nav li {
>>> float: left;
>>> height: 21px;
>>> background-color: #AADFE0;
>>> margin: 1px 1px 0 1px; /* this controls the space between tabs */
>>> border: 1px solid #59C0C3;
>>> border-bottom: 0;
>>> }
>>>
>>> ul#nav a:link, ul#nav a:visited {
>>> display: block;
>>> color: #BE32FE;
>>> background-color: transparent;
>>> text-decoration: none;
>>> padding: 4px 15px;
>>> }
>>>
>>> ul#nav a:hover {
>>> background-color: #BE32FE;
>>> color: #F3F7D4;
>>> font-weight: bold;
>>> font-size: 100%;
>>> }
>>>
>>> body#home li.home, body#about li.about, body#tour li.tour,
>>> body#contact li.contact, body#faqs li.faqs, body#coupons li.coupons,
>>> body#members li.members {
>>> border-bottom: 1px solid #fff;
>>> color: #59C0C3;
>>> background-color: #FF;
>>> }
>>>
>>> body#home li.home a:link, body#home li.home a:visited,
>>> body#about li.about a:link, body#about li.about a:visited,
>>> body#tour li.tour a:link, body#tour li.tour a:visited,
>>> body#contact li.contact a:link, body#contact li.contact a:visited,
>>> body#faqs li.faqs a:link, body#faqs li.faqs a:visited,
>>> body#coupons li.coupons a:link, body#coupons li.coupons a:visited,
>>> body#members li.members a:link, body#members li.members a:visited {
>>> color: #59C0C3;
>>> font-weight: bold;
>>> background-color: #FFF;
>>> }
>>>
>>> I can always just remove the background on the hover, only showing a
>>> change on the font color, but I would really like to know what is my
>>> problem for future projects.
>>>
>>> Thanks.
>>> Joan
>>>
>>> _
>>> Don't just search. Find. Check out the new MSN Search!
>>> http://search.
Re: [css-d] I also have a problem with background color change on hover, clearfix hack
No problem, I came across the clearfix hack quite recently on
http://www.positioniseverything.net/easyclearing.html, It's useful for
keeping your css simple in a complicated float layout without using any
additional html.
You can treat the containing block as part of the normal flow for
all browsers, the only problem now is that it's apparently not suitable
for IE7, there's an article here:
http://www.stuffandnonsense.co.uk/archives/clearing_floats_without_structural_markup_in_ie7.html
but i wouldn't worry about implementing anything because of that yet,
IE7 is still in its testing stage.
The article here:
http://www.tanfa.co.uk/archives/show.asp?var=300
actually demonstrates how the clearfix hack still works in IE7. I'm
a little confused myself but this code works (fingers crossed):
.clearfix {
display: inline-block;
}
/* Holly Hack Targets IE Win only \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Holly Hack */
So just a minor alteration on the clearfix hack i put in your css
file. If you want any more examples of uses for the fix there's a
template i'm working on a site with a collapsable layout for the
categories here:
http://www.thebusinesscommunity.co.uk/templates/westpennine/
I could just clear the footer but you get more control over the
positioning and margins on an element that contains floats (such as a
list) this way.
Hope I haven't confused you at all,
Rob
Joanie Mae wrote:
> It works! The server the site is on is not connecting but once it is
> operational again I'll load it up!
>
> I'd not yet encountered the clearfix hack in my "learning" journey. Is
> it used for other issues other than navigation problems?
>
> Many many thanks for your help, Mr. O'Rourke. I greatly appreciate it.
> Joan
>
> _
> Express yourself instantly with MSN Messenger! Download today - it's
> FREE! http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
>
>
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] strange border rendering on a fieldset in ie
Hello, I've been spending some time getting to grips with forms and css, There's a strange effect in IE where the fieldset displays properly as indicated by the background-color however the orange border and legend are pushed down into the fieldset, there's a test page here: http://www.sanchothefat.com/css/multiform.html The css is inline and really scruffy, apologies for that if you're used to looking at nice css. If anyone has seen this problem before and knows how to sort it or knows a link please let me know. Cheers Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] strange border rendering on a fieldset in ie
Alright Richard,
Cheers for getting back to me, I've actually found a rudimentary fix
for the border problem. I doubt it will hold up when re-sizing text in
IE but to be honest for the rare occasions thats necessary it still
won't look too bad because everything is in the right order.
I had 10px of padding on the fieldset, this has the effect of
pushing the legend down within the fieldset, even though the fieldset's
/border/ is kept in line with the legend.
I first of all removed the padding ( using * html ), this made the
legend sit at the top of the fieldset but still contained within it.
When i first saw fieldset/legend rendering i thought it was an
automatic position: relative type effect, so in this instance that is
exactly how to fix this issue in IE,
* html fieldset {padding-top: 0;} /* remove 10px padding */
* html legend {position: relative; top: -10px;} /* move legend and
border to correct position */
I'm going to put a test together to find out if putting margin on
the fieldset and margin on its children instead of padding on the form
and padding on the fieldset alter the way its rendered in IE.
Hope this helps anyone with the same problem,
Rob
[EMAIL PROTECTED]
Richard Allsebrook wrote:
> Hi Rob
>
> > If anyone has seen this problem before and
> > knows how to sort it or knows a link please let me know.
>
> Yup, I've seen it before: in every single form I've ever made - and no,
> there's no way to fix it. This is just how IE renders the legend
> position :-(
>
> In this particular case, I would use a conditional style sheet (
> http://www.quirksmode.org/css/condcom.html ) to give IE a stylesheet to
> make it look presentable (change the background on the fieldset to that
> of the form for instance).
>
> They won't both look the same, but they both will look ok :-)
>
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] changing bullet point colours
: > Hi > > Has anyone found a way of changing bullet point colours to a different > colour to the text Hello, You could always put the text in a span, i'm not sure if you can do it without markup. Its got me thinking though, what about multi-coloured bullet points, each list item would require a class but thats quite common for navigation bars using icons etc... Here's something i knocked up: http://www.sanchothefat.com/css/mentalist.html Rob [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] changing bullet point colours
Its had a baby! I did knock it up after all... =P Akins, Chris wrote: > Maybe you mean "mocked up" rather than "knocked up." 2 different things > entirely. > > :-) > > > Here's something i knocked up: > > http://www.sanchothefat.com/css/mentalist.html > > Rob > > [EMAIL PROTECTED] > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > > > > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hello new to list and with layout problem
Hi Richard, I'm definitely not an expert but there are definite advantages to css in terms of the layout, once you've done some research and a lot of playing around with css layouts it all comes together. Getting used to using class names and ids appropriately is the key to not repeating css code. Ids can be used only once and class names are good for multiple uses. If you have a look at this: http://www.sanchothefat.com/css/css-d.html, it's done using one id and one class name. Feel free to use it, the css is in the header. Rob Richard Gilmore wrote: > Hi everyone, > > I¹m Richard I¹m new to the list and new to CSS. I¹m learning it for my job > and the websites I work on. I¹m used to tables and old fashioned html and am > having a hard time understanding how layout is done in css. I¹m used to > working with Fireworks and Photoshop, Illustrator and InDesign/Quark where I > can just drag items around visually and plunk them wherever so css seems > very alien and non intuitive to me. > > I¹ve got an example here of what I¹ve done and now I¹m stuck. And I¹ve > included a jpg of what I would like it to look like. Can it be done in css? > Frankly I¹m having a hard time believing the hype about how good and useful > css is supposed to be when I can¹t even do the simplest layout. I feel > stupid. Can what I want be done and how would I go about it? > > I design on a Mac with Dreamweaver MX 2004 (and Firefox) but nearly everyone > else I work with uses XP and the site will mostly be viewed on Win IE and > maybe Win Firefox. > > Any help would be greatly greatly appreciated. > > Thank you > > Richard > > > http://www.edu.uwo.ca/newsletter/css_test_files/test.html > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Latest Firefox update - is it just me or has it screwed the rendering?
Ever since I updated firefox ie. two days ago some sites have been displaying oddly, various blogs with fixed width-ness going on seem to pick up fluid sizes when the window is resized to be smaller than the content. Some examples are left-aligned nav bars with a fixed width still shrinking as if they have a set margin-right in a fluid layout. I probably haven't explained it too well but if you've seen any similar problems recently I'd be interested to know whats causing it. Even mezzoblue.com was affected (comments spanned into the right-hand nav bit) which makes me think it was either a local glitch or a page glitch. I was reading some comments about font sizes being too tiny i think. Anyway, the problems are layout, width/margin based. Has anyone else noticed anything or do i need to reinstall? Cheers, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Latest Firefox update - is it just me or has it screwed the rendering?
L. David Baron wrote: > > Are you referring to Firefox 1.5.0.2 (released about 28 hours ago), or > to something else? > > -David > The one released 28 hours ago, I always update when i get the option to. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] selects appearing above an a.p. ul
Hello, I'm using Christian Heilmann's pure DOM explorer (http://www.onlinetools.org/tools/puredom/) for part of the navigation in an app that i'm working on. I have a horizontal list, the first of which contains the submenu. The page will contain generated forms (laid out in a table) for editing a database. The menu appears onclick as expected however in IE (only tested on IE6sp1 so far) the select elements in the form display on top of the absolutely positioned list. I have tried z-indexing to no avail so i'm assuming it's either to do with the floated list items, a negative margin on the containing div or something else to do with the javascript that i wouldn't be able to figure out. I haven't been able to find any references about it, so if anyone has seen anything like it then i'd be interested to know how you fixed the issue. I'm going to experiment some more so i'll post back if i sort it out. Cheers, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] selects appearing above an a.p. ul
Bill Brown wrote: > click the toolbar label on my site, it snaps the toolbar into a dashboard or > console fixed across the top of the page. Worked great, except in IE, select > elements were appearing above the dashboard. The fix I used is included in > the ieFixes style sheets and the iframe can be found at the bottom of the > code. > > Hope that helps. > Bill Brown > Webmaster, MacNimble.com > Cheers Bill, I always used to say it but even moreso now, 'everyday is a school day'. I had no idea as to the depths of IEs general ignorance of usability but hey, I've been writing css and xhtml for long enough that nothing surprises me if it doesn't work properly in IE! Thanks for the heads up anyway, the good news is its an internal system so we only use Firefox or sometimes Opera. It's defnitely useful to know though, thanks again. Your pet squirrel is cool an all, i've only ever found a tame one when i nearly trod on it while on holiday in Wales! Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: navigation with death kiss by Dave Shea
> i'm currently having a problem, i never had before; > i'm using Dave Shea technique for navigation for my site, but it wont show > this time, and i dont know where i'm doing wrong since both xhtml and css > validates fine; > Hi Landrik, I've played with this technique a little, what exactly is the problem? Are the :hover effects not displaying or does the whole nav not show? If you could send us a url i'll be able to help more easily. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Liquid layouts with graphics
Mark Fellowes wrote: > I think this is probably obvious to me but at the certainty of sounding > stupid I'll ask. > I am working on a liquid / fluid layout, 3 columns using floats. If it's > relevant this is the rough layout: http://pamshop.com/Template1/exp10.html > > I'm considering using a one image rollover navigation thing. Haven't done it > yet but essentially there will be a graphic image as a background. Since the > divs are all in percentages, is there anyway I could get that graphic to not > break on either a smaller or larger monitor resolution ? > Depends on the background image i guess and whether you can repeat it horizontally. If you only apply the background image to the links and not the list and give each a left and right margin in % it could work. I've got a friend with a stupidly wide monitor (32") and he browses without sidebars and with the window maximised, not to mention hi-res. On that screen you'd get some /really/ sparse links so it might be better to fix the width of the navigation or alternatively set a max-width. The only problem there is in needing a javascript fix for <=IE6. Keep us posted, i'm interested in seeing what you come up with, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ugly IE effect with submenu (ul li:hover state)
Alberto Stracuzzi wrote:
> Hi everyone.
>
> I combined a css with peterned's csshover.htc (IE 6 doesn't understand
> the pseudoclass :hover - http://www.xs4all.nl/~peterned/csshover.html )
> You can see my site: http://segramm.dsi.unimi.it
>
> It works fine until the second submenu or, better, with IE it works fine
> until the first menu. The second submenu appears 'under' the first.
> Sincerely I don't understand why. I made some operations to force it but
> with no result.
>
> You can find the css at: http://segramm.dsi.unimi.it/dsicss.cs
Hi Alberto,
I've used this same .htc file on another site that i'm making
(http://www.rodimus.co.uk/) to do some hover that are going to be popup
mini-bios on the band members. I learnt quickly not to get carried away
with z-indexing, its not always necessary where position: absolute; is
concerned.
The problem you have here is produced by the lack of position:
relative; on your ul#menu, try this:
ul#menu{
float: left;
white-space: normal;
margin: 0;
padding: 0;
position: relative; /* important */
}
Saying this i have only tested in FireFox but i think it was simply
an issue of z-index without position relative/absolute on the parent
element.
Hope this helps,
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @import media rule
jack fredricks wrote:
> Hi all,
>
> I've done a bit of a google - with no luck..so I thought I'd mozie on
> over here...
>
> I can't seem to get this rule to work on IE6 or FF;
>
> @import url("fineprint.css") print;
>
> http://www.w3.org/TR/CSS2/cascade.html#at-import
>
>
> The file and the file location are fine (a standard LINK element
> works). It's just the @import version that breaks.
>
> Is this just bad UA support? Is there a known work around? or am I just mad?
>
> thanks
> jz
lo,
Had the same issue recently, IE and surprisingly FF don't seem to
support that structure unfortunately, To select media specific css i
used the element and just a normal @import rule for the main css,
ah well :(
You could always try
@media print { @import url("print.css"); }
but i've not tested it.
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] columns streching
Erik Visser wrote: > so i'am looking for a place with good explaination of the technique(s) of: > columns streching to the bottom of the viewport, regardless of the > content length of any of the columns > > through google i found in some forums tips for specific user questions, > but not a good article that (thorrow) explains (if there are several > solutions, pros cons, etc.) how you should tackle this goal > something ALA (or comparable) like > > please some links / tips > > thanks, Erik Hi Erik, I think these are the best explanations i've found: http://www.alistapart.com/articles/holygrail/ This outlines a good 3 column layout and the associated pros and cons as well as a description of how to create full length columns. Its a pity but browser support can vary, I think its Opera 8 has some problems. This is my preferred method and uses a graphic to create a false column, unfortunately it needs to be fixed width (although that can sometimes be a good thing): http://www.alistapart.com/articles/fauxcolumns/ Hope this helps, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Images in liquid / elastic layouts.
> I thought I could get the graphics to expand (Latin text box) using a rounded > corners method. However the box breaks up as the text is enlarged. > > So being aware of the various limitations and knowing the chances one takes > are there some guidelines to follow when using images in a liquid design? > > Hope this makes sense > Mark > The problem here is the images, they /don't /change size. If you can find a way to give the content area a repeating background image or make the four corner images larger then its alright (at least for a few more text sizes up). I'd go with a reapeating background personally. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A Fairly Complex Design Complete, wishing to implement using all CSS
> Finally... I am (BRAND) new to the list - please accept my apologies if this > post is offensive in any way, as I have not had time to lurk and observe the > true etiquette and nature of the list. I just want to get this done, but if > a CSS-only layout is too much for this design, I'll have to go back to > regular tables. > > Thanks for whatever help you can provide... > > M Any sample pages or links? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site Check please, www.1850.co.uk
Hello, I am in the process of handing over a website for an antiques company and so far I have only been able to test it under FF 1.5, IE6win, and Opera 8+. These are all fine i think but i would really appreciate it if anyone could have a look on mac browsers and earlier IE versions. The site does have some blank pages where there is a category but no products as yet so bear with it, all I'm concerned about is the layout breaking or any wierdnesses in any other browsers. http://www.1850.co.uk/ Thanks in advance Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check please, www.1850.co.uk
Thanks a bundle to everyone =] The screen shots provided by David Laasko all look good to me, there's a bit of a width issue on the product boxes in IE5.0 but it's still set out like a list so i'm going to treat that as 'acceptable' for now. I can't believe i forgot about those site map and content links! the site map feature is disabled on the cms im working with...that is until i err, add it I think i'm just going to hide them from all browsers that use css and change site-map to a skip-to-navigation link for the time being. I appreciate the design advice too David, I agree it doesn't look antiquey however the client looked at an initial design i made that featured deep red colours in the layout that he didn't like. As it was taking longer than it should have we eventually decided it should look like his existing business card... and there it is =] Cheers for link to iCapture too Dave, very useful. Thanks again to everyone. Stayed tuned for more 'Site Check please' Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check please, www.1850.co.uk
Andree Hollander wrote: > Here's a screen shot from Mac OS X 10.4, Netscape 7.2. > > Overall it looks very nice, but the last item on the left (Home Page > Featured Items) has too little room. And I think it is strange that > the tooltips on the links have the same text at the items themselves. > Make them give an extra explanation. > > > > Thanks Andree, The normal font for it is Georgia which doesn't stretch right to the end of the link box, but i think i'm going to get rid of the bold styling on those links to give them more room. Unfortunately it's in the hands of my client as to how long the category names are... I just have to limit any possible damage to my original template. Thanks again for all your help. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Generally: CSS and SEO
> My question is this: is it more search engine friendly to use a mark-up > format of Columns / Header / Footer and use CSS position:absolute to place > Header above Columns and Footer? If so, what are the pitfalls, if any? > > TIA for response. > > Mike A. Hi Mike, I think thelist (http://lists.evolt.org) would be better suited for SEO questions but basically if you did that and some was browsing in say, Lynx or using a screenreader the page would be just a wee bit confusing. Its better to accomodate users than it is search engines. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Generally: CSS and SEO
> Thanks Robert, > > My apologies, I wasn't specific enough. My question was intended to point > towards CSS issues of using flow in the way under consideration. So I should > have written, "what are the CSS pitfalls, if any?" > > I accept, of course, there are other issues, especially accessibility ones, > but they are outside the scope of CSS and can perhaps be conquered by other > means including adequate content placement. > > Mike A No worries Mike I've done the same thing myself, I guess just using appropriate headers in the content would be enough for the accessibility. CSS-wise i think position: absolute or fixed could work. If I were you I would give the header a height in ems and pad the body at the top with the equivalent amount of ems to allow for re-sizing. I use this method to position the navigation at the top of the page usually. If the navigation and header are images in which case fixed pixel heights etc... are better suited. As far as pitfalls go it's down to cross-browser rendering of absolutely positioned elements. I use the strict-mode doctype nearly all the time now and have a lot fewer issues with layout as a result. If you're just positioning an h1 at the top it should be straight-forward. Hope this helps, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Broken Layout
Brian Jones wrote:
> On 5/31/06, Robert O'Rourke <[EMAIL PROTECTED]> wrote:
>> You can either do this:
>>
>> .float
>> {
>> float: left;
>> width: 190px;
>> margin: 0;
>> padding: 0 0 0 10px;
>> }
>>
>> to fix it.
>
> Hi Robert I made the changes that you suggested to my CSS and the
> thread div is still pushed to the right
>
>
>
D'oh. Well it was late so i only looked at your code really briefly.
I didn't quite understand what you were doing with the background image
til now.
You might want to consider using a couple more divs to handle the
background image. The top border on the div.inner-footer p extended
beyond the border created by the image and the margins on your
paragraphs were producing gaps. You have to be pretty careful when using
one big image to create a border. I've had some time today and here's
what i've come up with:
http://www.sanchothefat.com/css/css-d-brianj.html
(css is in the header)
Rob
(forgot to cc the list last time)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Broken Layout
Brian Jones wrote:
> On 6/1/06, francky <[EMAIL PROTECTED]> wrote:
>
>> New experiment: here is another altenative, with small images, and
>> font-scaling proof:
>> http://home.tiscali.nl/developerscorner/css-discuss/test-brian.htm
>> (fixed width version)
>
> Hi francky,
>
> thanks for your help...i will use this technique..but I have a
> question..in the inner-body div if you decrease the content, say to
> only one line of text, the green border does not extend the height of
> the inner-left div...so how can I have so that no matter what the
> length of the content is in any div there's a border separting the
> inner-left div and inner-body div.
>
> Could I use the panel-sides image that you've supplied and have it
> repeat-y? or what?
Hello again Brian,
Francky's examples are really good, I like this method of using one
image for background effects. I've only tried image slicing with
navigation before now. Anyway, you need to use the min-height attribute
and a wee hack for IE <= 6.
.inner-body, .inner.left {min-height: 100px; /* or whatever */}
* html .inner-body, .inner-left {height: 100px; /* or whatever */}
The second rule is an IE-only hack that should probably be in a
Conditional Comment (worth reading up on) but anyway, the point is that
when you set a fixed height in IE <=6 and the content extends beyond
that height IE incorrectly expands the height of the container so in
effect it's the same as min-height, but only in IE.
I've just done some reading up on min/max stuff in IE7 and it seems
it's not in the beta yet but they are working on it. Does anyone know if
IE7 still expands elements with a fixed height if their content overflows?
Cheers, Rob O
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7's treatment of height [WAS Re: Broken Layout]
> Rob, > > No, IE7 now respects height. So, all those Holly Hacks with height: 1% > will need to be hidden from it or altered. However, I'm not sure if IE7 > supports min-height (can't remember!). > > Zoe What a nightmare! According to the wiki IE7beta2 does not support min/max rules yet: http://css-discuss.incutio.com/?page=IE7 I hate hate hate IE expressions but it looks like they might be the only choice until IE7 final is out. Thats assuming they get round to supporting those rules... It just seems funny to me how they essentially had the min-height rule working (albeit in the wrong way) and they've fixed it instead of just re-naming it. Is it worth coding in accordance with the current beta release or is waiting it out a better option... or to put it another way is IE7 currently used for anything other than testing? Thanks for getting back to me Zoe, Rob O __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7's treatment of height [WAS Re: Broken Layout]
cj wrote: > On 6/2/06, Zoe M. Gillenwater <[EMAIL PROTECTED]> wrote: > >> No, IE7 now respects height. So, all those Holly Hacks with height: 1% >> will need to be hidden from it or altered. However, I'm not sure if IE7 >> supports min-height (can't remember!). >> > > yes it does and the latest beta has it :). for those who signed up > for the microsoft feedback program, this issue is at > https://connect.microsoft.com/feedback/ViewFeedback.aspx?SiteID=136&FeedbackID=57504 > > > for those that haven't, the comment given when the issue was closed in > the connect feedback system was: > > Entered by Microsoft on 4/21/2006 > This was logged as a suggestion for future IE versions. We've already > added support for min-height and it is in the March 20 Beta 2 Preview > build that we put out during MIX06 > Al Billings Hooray! Thats a load off my mind. I picked a fun time to get into web development =] Time to update the wiki re. min/max then. Cheers cj Rob O __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7's treatment of height
Ingo Chao wrote: >> Time to update the wiki re. min/max then. >> > > You seem to have overlooked the "Fixed in Mar20:" comment. > > It is implemented [1], it works well, but it adds haslayout. > > Ingo > > [1] I think this intervening post > http://blogs.msdn.com/ie/archive/2006/02/02/523679.aspx#524747 > caused MS to implement it. Aha, thanks Ingo. That was a pretty crucial comment to overlook! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7's treatment of height [WAS Re: Broken Layout]
bj wrote:
>> Entered by Microsoft on 4/21/2006
>> This was logged as a suggestion for future IE versions. We've already
>> added support for min-height and it is in the March 20 Beta 2 Preview
>> build that we put out during MIX06.
>>
>
> Did anyone else notice that NOTHING is said about min-width, max-width or
> max-height?
>
> *grumble growl*
>
I think thats only because it was the height issue i was panicking
about, I read the wikis IE7 page again more carefully and all the
min/max stuff is in the new beta. Its alll good.
Although there are some problems that Ingo pointed out, it adds
hasLayout but I'm not too worried about that. That is until there's a
reason to use min/max on inline elements (i think thats what the issue
might be... please correct me if i'm wrong anyone).
The reason I asked the question in the first place is because i've
been using the following rules to set min-height for modern browsers and
/'height'/ in IE6:
#container {height: 250px;} /* min-height for IE6 and below */
html>body #container {height: auto; min-height: 250px;} /* min-height
for everything else */
The latter should then be picked up by FF, Opera, Safari etc... and
also IE7 but ignored by IE6. There may some problems I have overlooked
in using this method but as far as I know it should work.
Rob O
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox issue
[EMAIL PROTECTED] wrote:
> Hi,
>
> I am pretty new to CSS. This file is fine with IE but when view through
> Firefox it does not display correctly. Any help would be greatly
> appreciated!
>
> http://www.ccclib.org/programs/srl_dsl.html
> http://www.ccclib.org/Style/programs.css
>
>
> Thanks
> Stacie
Hi Stacie,
Firefox is implementing the css correctly here while IE is getting
things wrong as Mr Goodchild pointed out. It can make life easier to get
a page looking good in firefox first and then tweak it for IE if necessary.
I've had a look at the css in the Firefox EditCss plugin and this
should fix the problem:
.imageleft {
float: left;
width: 150px;
padding: 20px;
}
.imageright {
float: right;
width: 150px;
padding: 20px; /* padding plus width (150 + 20 + 20) equals 190px */
}
.bodyright {
margin-left: 190px; /* margin-left to keep the text from wrapping
around the floated image */
text-align: left;
padding: 8px;
}
.bodyleft {
margin-right: 190px; /* same as above but moves the text to the right
of the image */
text-align: right;
padding: 8px;
}
You should use an #id only once in an html document. If styles need
to be applied more than once use a class name e.g. in this case i have
changed #bodyleft to .bodyleft and so on (the html will need to be
altered accordingly).
The best way to get to grips with floats and how to use them is to
experiment or look for tutorials like this one:
http://css.maxdesign.com.au/floatutorial/
Good luck,
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index question
xtiandc wrote: > Just to clarify, I suppose my real question is: can you apply z-index > specifically to an element that only appears on hover? > > > My question is this: is there any way to enforce z-index conditionally? > > Christian. > Hi Christian, Interesting problem, there're a few considerations when making flyout/dropdown menus with css but first do you have a link at all? z-index issues are hard enough to solve cross-browser as it is :) One other point that was made clear to me by Bill Brown is that you need to avoid any a.p. elements such as your menu covering form elements. The issue i had once was with a select box that could not (and cannot) be concealed in IE. Something to do with ActiveX rendering... I don't remember why exactly just that thats the way it is, anyways, a link would be good to get the ball rolling. Rob O __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 column layout problem
[EMAIL PROTECTED] wrote:
> I have a page in a 2 column layout When the content in the right column goes
> beyond the the content in the left column, the extra text moves to the left.
> ...
>
> Cheryl
>
Hi Cheryl, its the 3-pixel text jog bug in IE. Its caused by an extra 3
pixels of margin that is added to floats in IE which affects adjacent
elements. This article should explain it all:
http://www.positioniseverything.net/explorer/threepxtest.html
In the meantime try adding this to your css (if you don't mind hacks):
* html #subnavwrapper {height: 1%;}
HTH
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float: left problem
> www.livinghopecollege.com/test2/
>
> It looks fine in Flock, but in IE the quick links are messed up.
> Anyone know if this is an IE bug or what and how to fix it?
>
> Trey Copeland
Alright Trey,
I'd start by setting a default margin and padding to the ul.
Different browsers have different default settings for these attributes.
For example this will be more consistent across browsers (negative
margins do funny things to IE):
#left ul {
margin: 0;
padding: 0;
}
#left li {
list-style-type: none;
margin-left: 20px;
}
There's something odd going on where IE displays a '<' at the start
of each link, hopefully just a result of the negative margin or the
float I'm not sure on that one. Try fixing a width on the ul and
experiment with padding and margin. Let us know how you get on =]
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page check please
Ian Young wrote: > thanks, Robert > > Trying to get the logo and the "about" gif to line up and be close together > as per original > > http://www.mambo.in-development-server.co.uk/trossachs/index.php?option=com_ > content&task=view&id=22&Itemid=39 > > This table based template looks ok but the script?!?! > > Ian Right, I see.. To get them to line up its probably easier to put the logo in a header div along with the 'about' gif to give a consistent height + background colour to that section. I think this may be your best option for this particular layout: http://www.alistapart.com/articles/negativemargins Its all float based and will allow you to create a fixed width sidebar and fluid content area using the same source order you have now. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] About replacing a structural table with colspan
> So I stumbled upon the zen garden, bought a book or two and am currently > converting to css-ism. > Heh, maybe css-ists will get tax-exempt status soon :P > However, I don't see a solution to a particular problem I have already > solved with the table, but cannot see a solution with css. Basically the > problem of how to replace the equivalent of a "colspan". > There isn't an 'equivalent' without going crazy with classes and extra markup. You have to think differently when using css for layout. Its more about making things flow rather than controlling them as tightly as a table does. > You see, I have structural elements called "sections" and "rows". Any object > (mostly form-input elements in these business applications) just placed on a > "mask" appear one below the other. > > Example: > > Labels of objects are always in the same column: > > Row1: |label 1: | [input1 ] | label 2: | [input2 ] > | > Row2: | Biglabel that | [input3 ] | some other thing: | [input4 ] > | > | breaks line: > Row3: > > > Rows with different number of elements are layouted like this: > > Row1: | label1: | [input1 ] | label2: | [input2 ] | label3: | [input3 ] > | > Row2: | label4: | [input4 ] > | > > > So the main question is, can I remove my structural table that lies around > each "row" and replace this with a CSS neatly wrapping some div's, or should > I better keep using the table until CSS2/3 and better tools become usable ? > > Sometimes for more complicated forms it's acceptable and still accessible to use a table, so long as the inputs are in a logical order i.e. in a row as opposed to columns of input sections and the labels correspond to the input ids correctly. Judging by the above examples this is the case. Seeing as you can't tell how how much text the labels contain or how many columns you need then a table is your best option for similar results cross-browser . Alternatively if you really want it all layed out with css forget 'columns' and 'rows' altogether and use fieldsets to group labels and inputs (this is really how it should be done). You can get fieldsets to stack up nicely using floats and a width in px/em/%. This is a good example of CSS forms: http://www.themaninblue.com/experiment/InForm/ > I could also provide a sample page, though believe > me, you really don't want to take a close look at that HTML. > Probably not ;) What else is written out in columns, rows and sections besides forms? hth, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Column Blow Out
Steve LaBadie wrote: > I have an issue where a table cell blows out when I put images in it. > If I put text in it, the cell stays firm. What suggestions are out > there to lock the cell from blowing out when I put images in it? > > > > What exactly do you mean by 'blowing out'? If its stretching to fit the image in then that's what table cells do. I guess you could make it a background image, depends on what it is you're aiming for. As a suggestion off the top of my head try setting some dimensions on the table cell with ems and set overflow: hidden; on it but I doubt it'll work. Got a test page or something we can see? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Column Blow Out
Steve LaBadie wrote: > Robert, > > The cell expands the page and throws the entire table out of whack. The > cell is set to 150px in width, the images are 145px. If I put content > in the cell everything stays perfectly together. > > > Which browsers have you tested this in so far? Sounds like a padding/margin problem perhaps. As a work around for now just use an but I can't be much more help without some code to look at. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
Tom Livingston wrote: >> Sure it is. Adding clearing elements, and the ensuing additional CSS (or >> extra clearing markup), makes code less readable for, in most cases, no good >> reason. Since overflow: hidden or overflow: auto does the trick, the whole >> issue of clearing floats becomes essentially a non-issue, and saves extra >> markup. >> >> > > Hold on. > > Adding overflow:auto; on a container will clear any and all floats > inside said container all by itself!?!? Cross-browser??!! And PIE's > Easy Clearing is 'so last year' too?!? Where have I been??? > > same place as me i guess! I thought overflow wasn't a good cross-browser solution either.. ah well, everyday's a school day. As for this CSSf thing I can see it being useful for those new to CSS as a learning aid but its not going to work as a specification. /Formatting/ CSS is all down to your personal preference, the important thing is making use of sensible and semantic id names and class names etc.. If another developer can find the bits they're looking for easily they could then just use their own text editor to format it how they want if it's so important. Guidelines and specs are two different things, CSSf is the former. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
Alex Foley wrote: > I'd sure like a confirmation from someone that overflow: auto is the way > to go... I've been clearfix-ing up until about 12:03 pm today. > > > Here we go: http://dev.l-c-n.com/IEW/containing-float-overflow.php It's not as consistent as clear-fixing but in general using overflow : hidden ; on divs will work. IE <=6 needs a hasLayout trigger too. Happy days =] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] easy question about centering my design on the page in css
juliann wheeler wrote:
> You can view my design at:
>
> http://www.agentevaluator.com/juliann/brown/indexbrown.html
>
> How do I get this to center on the page?
>
> thanks!
>
It's a bit tricky when everything is absolutely positioned like that.
You could produce the same layout with floats and normal text instead of
images. I tried resizing the text and all that happens is the right hand
column text starts to move down and disappears behind the div #layer9.
In the meantime change all those left : 25px; declarations on each layer
div to left : 0 ; and add this div in your markup:
...everything that's currently within the tags goes in here...
and then add this to your css:
#wrapper {
position: relative; /* absolutely positioned blocks will be positioned
relatively to this */
width: 750px; /* important for the margin auto declaration to work
*/
margin: 0 auto; /* the auto bit achieves the centering */
}
That should do it but it's not reccommended to use position: absolute;
for the layout.so extensively. Google around for some float layout
tutorials then if you get stuck there's always this list.
Hope this helps,
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting - overflow for clearing floats
> So, the overflow-property is a useful solution for containing floats in > some cases, but not in others. > > regards > Georg > Good to know, Does a floated element within a container that has overflow : hidden ; applied respect the padding of the container? In particular the bottom padding, and also are there any cross-browser differences in this instance? (apart from the usual =P ) Cheers, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] floated layout puzzle
Audra Coldiron wrote:
> Hi Everyone,
>
> I'm hoping someone out there has the insight I lack to achieve this
> certain layout.I'm not sure it's even possible.
>
> I want to do a 2 column fixed width floated layout with a header and
> clearing footer. Sounds simple enough, right? Well, I also want to
> float a photo that appears above the header in the source and clear the
> smaller column under the photo on the same side. The user has control
> of the content so if a picture isn't there I want the column to suck up
> under the menu. The problem is if I float the larger column (the main
> content), it clears below the photo. If I don't float it portions of
> the content clear below the photo. I can't change the HTML. Any
> suggestions?
>
Yeah I found IE allows the floats to move up regardless of source order
on a recent project too but it wasn't beneficial. The effect you're
after can possibly be done using the sibling selector. IE6's rendering
could be mimicked using this horrificly hackish approach:
div#site_photo + div#header + div#navbar + div#content_wrapper {
position: relative; top: -170px;}
Assuming that div#site_photo only gets written in when there's an image
the above code will pull the content column up in modern browsers. It
will look stupid when re-sizing the text though and leave a big ole gap
at the bottom.
Its a pity you can't edit the html because if you could have the content
appearing above those teasers (or even if those teasers weren't part of
the navbar) you'd be in business. From messing around there's a few
workarounds using positioning but none of them are ideal. It relies on
whether the whole div#site_photo is there or not and then positioning
the teasers div absolutely.
You could show this to modern browsers only:
/*//
HEADER & SITE PHOTO
If you want the user not to be able to change the main photo and/or
site title, place "display: none" in the style for that element.
//*/
html>body div#header {
text-align: center;
float : left;
width: 550px;
}
html>body div#header h1 {
position: relative;
z-index : 12;
}
html>body div#site_photo {
float: right;
position: relative;
z-index: 20;
}
/*
NAVBAR: TEASERS & MAIN MENU
///*/
html>body div#navbar {
float : left; width : 550px; position : relative;
}
html>body div#teasers {
position: absolute;
top: -2.4em;
right : -200px;
width: 200px;
}
/* if the div#site_photo is there then the teasers will be moved down to
make room for the image */
div#site_photo + div#header + div#navbar div#teasers { position:
absolute ; top: 210px; }
html>body div#main_menu {
position: relative;
}
/*/
GENERAL CONTENT
//*/
html>body div#content_wrapper {
float:left;
width: 550px;
}
div#content {
}
>
> Any help would be very appreciated!!
>
> Thanks,
>
> AC
>
Hope that helps, and like I said its a mingin solution. If you want me
to attempt to explain it better let me know.
I'd get that teasers div taken out of navbar and made separate if you can.
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background pos x/y repeat-x/y
[EMAIL PROTECTED] wrote: > Anyone ever notice that if you repeat-x a background image you can only > background position that image on the y coordinate and vice versa - so > when you repeat-y you can position x but the y is useless (defaults to 0). > ?? Isn't that kind of the point? Or did you want to repeat something from a particular position? In which case you need to get clever with wrappers and blocks and backgrounds. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background pos x/y repeat-x/y
[EMAIL PROTECTED] wrote: > yes it does seem to make sense however it would be nice to be able to do > and not add extra divs > > > Thats true, I think the CSS3 border-image properties might go someway towards sorting that kind of thing out. Damn all this waiting... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background pos x/y repeat-x/y
Eric A. Meyer wrote: > There are no values such as 'repeat-down' or 'repeat-right', which > is what I assume you're seeking. > > Is there going to be a feature like this in future at all? I can see it being useful, at least for the sake of completeness in the range of background properties available. Cheers for clarifying the background repeat/positioning question. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background pos x/y repeat-x/y
Michael Landis wrote: > Eric A. Meyer wrote: > >> There are no values such as 'repeat-down' or 'repeat-right', which >> is what I assume you're seeking. > > On 7/29/06, Robert O'Rourke <[EMAIL PROTECTED]> wrote: > >> Is there going to be a feature like this in future at all? I can see it >> being useful, at least for the sake of completeness in the range of >> background properties available. > > It looks like it's an outstanding question on the CSS-3 draft on > backgrounds.[1] It would be a good thing, but given the time it takes > for specifications to become complete, and for browsers to adopt those > specifications, it's not likely to happen in the near future. > > In the meantime, probably the simplest way to do something similar is > to repeat your background image in a wrapper div, then use another > image that's half-transparent, half-background-color to block out the > part where it shouldn't appear to repeat-left.[2] > > HTH, > > Michael > > [1] > http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-repeat > [2] http://www.michael4css.info/examples/mask/mask.html > > Cheers Michael, I wasn't expecting anything soon, just curious to know if it had been considered for the draft. I struggle with sifting through the w3 specs sometimes because of the sheer volume so thanks for that first link [1], answers the question very nicely. Plus I should have realised if Mr Meyer suggested the rule names earlier in this thread then of course its been considered. (I'm on a satellite delay to the rest of the world :P ) I also like the sound of the background-repeat: space; rule where a background image is only repeated as many times as the viewport can fit it in without cropping it. I'm really looking forward to this spec being implemented. =] For the time being the way i do my block work at the moment means that the situation where it would come in handy hasn't arisen yet but i'm sure as my designs improve it will. Thanks again, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Skewed Text.....can it be done?
Christian Heilmann wrote: >> I was just playing with photoshop to come up with a new layout for a site >> and I was wondering if it was possible to do skewed text, or divs. I am >> finding it hard to word this properly so I will just post a link to the >> image of what I have in mind. And if any of you have any comments or >> suggestions please let me know. >> >> http://2d.ie/roughwork4.jpg >> > > CSS doesn't do it > MSIE special filters for CSS do it: > http://en.selfhtml.org/css/eigenschaften/filter.htm > SVG will support this: http://www.xml.com/pub/a/2004/06/02/svgtype.html?page=3 > Flash does it now > > I wouldn't do it. > > I reckon it could be done using eric meyer's slantastic method along with height: 100%; applied to 3 main column divs floated left with some left negative margins on them... oh and italic text. It'll probly look a bit naff and text-resizing will be an issue at larger sizes. Backwards compatibility is sucky too so you'd need an IE5.5 and below filter to convert back to plain columns. http://meyerweb.com/eric/css/edge/slantastic/demo.html It'd be interesting to see if it works. Best off with flash if looks are more important than search engines though. Good luck =] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Style with only one bit of content
Christian Montoya wrote:
> On 8/3/06, Eoin Maguire <[EMAIL PROTECTED]> wrote:
>
>
>> It seems strange to create a whole new style just for adding bold text but
>> then I can't think of any other way of doing it. I've ended up creating
>> styles named things like 'makeBold' with nothing more than "font-weight:
>> bold" inside them.
>>
>> Is this the proper way of adding simple levels of styling?
>>
>
> Nope. Use multiple classes:
>
> ...
> ...
>
> then in your CSS:
>
> .special { font:...; color:...; }
>
> .bold { font-weight:bold; }
>
>
>
Or better yet use a tag if it adds semantic value to the document.
http://www.stuffandnonsense.co.uk/archives/semantics_and_design.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Style with only one bit of content
Dave Goodchild wrote:
>
>
> On 03/08/06, *Robert O'Rourke* <[EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]>> wrote:
>
> Christian Montoya wrote:
> > On 8/3/06, Eoin Maguire <[EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]>> wrote:
> >
> >
> >> It seems strange to create a whole new style just for adding
> bold text but
> >> then I can't think of any other way of doing it. I've ended up
> creating
> >> styles named things like 'makeBold' with nothing more than
> "font-weight:
> >> bold" inside them.
> >>
> >> Is this the proper way of adding simple levels of styling?
> >>
> >
>
>
> Multiple classes are not supported by IE. Use for semantics,
> and if you really need to:
>
Thats only if you concatenate class rules in the css like so:
.className1.className { rule : attribute ; }
I've never had a problem using multiple classnames in the html as per
Christian's suggestion and using the following css:
.className1 { rule : attribute ; }
.className2 { rule : attribute ; }
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site check please
Hello list, Another day another template, I'd appreciate some testing on http://ipg.sanchothefat.com Its the development copy of a simple website I've put together to try and improve their search engine rankings. I'm not really a designer so I didn't spend long on the design (its a lot better than the last one they had at least) so I'm only concerned about css glitches. I've validated it and tested it successfully on IE6, FF, Opera but that's it. (I'm still trying to figure out vmware :P ) It's very basic so should hold up, fingers crossed. I get a free holiday for this one =] Thanks in advance, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please
David Laakso wrote: > Robert O'Rourke wrote: > >> Another day another template, I'd appreciate some testing on >> http://ipg.sanchothefat.com >> Its the development copy of a simple website...} >> Rob > ... > > Subjective: > The pale yellow is too pale; and, while the fonts scale fine, the start > point for the primary content is a little small for my taste(or lack > thereof). > Cheers don. You're right about the pale yellow, I took it from their logo. I also tried out leaving the font size at 1em initially but it didn't look that good to me. Anyway, looks a bit flaky in IE5 on PC, but acceptable and Safari has some issues with the js image fader by the looks of it so i might just get rid of it. Thanks for the screenshots. > Best, > ~donQuixote > PS Another day, another windmill. > Keeping fighting the good fight man. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering picture/text
Jan Erik Moström wrote:
> Another basic CSS question. What I would like to do is to create a part of
> page
> that contains a photo with a caption that is centered on the page, something
> like this:
>
> ---
> | some other part of the page |
> ---
> | |
> | --- |
> | | | |
> | | | |
> | | picture | |
> | | | |
> | --- |
> | Caption line 1 |
> | Caption line 2 |
> | |
> ---
> | some other part of the page |
> ---
>
> After some experimenting and checking the web I've come up with the following
> HTML
>
>
>
>
> Ett litet test
>
>
>
> and the CSS
>
> #pagecontent
> {
> width: 480px;
> margin: 0 auto;
> }
>
> #picture img
> {
> padding: 6px;
> margin: 0px;
> border: 1px solid #555;
> }
>
> #picture p
> {
> padding: 0px;
> text-align: center;
> }
>
> while this works it requires that I adjust the width of pagecount. My problem
> is
> that I want to generate these pages automatically, and while the program I use
> generate height and width tags that I can use I can't do math. Which means
> that
> if I want to have the border around the picture the centering will be slightly
> off.
>
> So I start to wonder if there is some better way of doing this that doesn't
> require me to know the picture size.
>
> jem
>
>
>
Hello,
Are all the images of varying widths and heights?
Perhaps you could try margin : 0 auto ; on the img itself and lose the
fixed width on the container?
Or you can set the width of the image in the CSS and set the height to
auto. As far as I know it overrides the width and height associated with
the image tag in the html. The first option may work better though and
avoids getting the browser to re-size images.
hth,
Rob.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please
Thanks everyone, I wasn't aware I could specify line-height without units till now. Nice one. I've used a darker colour for the emphasised paragraph and left the font-size on the body and content well alone. I think the reason I shrank it down was that trebuchet didn't look so good so I've specified helvetica instead which seems to work better. I go through phases of using a particular font... not good really. I'm gonna have to knuckle down down and get to grips with typography. Anyway, time to put this windmill to rest. At least it looks good on a mobile phone =] Thanks to donQuixote, Felix, Dave Pierce (for an off-list screen grab in safari) and dino for their comments and Georg for educating a young upstart like me. -Sancho Panza __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Development General Question
OOzy Pal wrote:
> Dears,
>
> Every time I start developing a site I start with small css file and
> after I am done the .css file gets bigger and out of control.
>
> I am sure that I am doing something wrong. I am sure that I am
> duplicating and adding items that I don't need. I mean items that can
> inherit their style from their parent selectors.
>
> My concern is how do I start? How can I track my selectors? Is there a
> program (Linux or Windows) that can track my selectors?
>
> What is things that you guys/gals start with when you develop a new
> site? For example do you do this
>
> *{padding:0; margin:0;border:0;}
>
>
> Any idea will be appreciated.
>
I've had similar problems in the past but there's a really useful tool
that comes with the developer toolbar [1] for firefox. If you go to the
CSS dropdown and click on view style information (or ctrl+shift+y) then
you can click on any element to see all the CSS that applies to it, that
way you can eliminate unnecessary styles and/or re-plan the code.
[1] https://addons.mozilla.org/firefox/60/
__
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] Embedded Fonts
Conyers, Dwayne wrote: > Dino CSS ink wired: > > >> Can I embedded ttf font inside my website through css so that any >> browser can open and view the font ? >> > > There is a Microsoft API for that... it isn't CSS and it isn't very > reliable either... > > > -- > I made magic once. Now, the sofa is gone. > http://dwacon.blogspot.com > > It's part of the CSS 2 spec [1] but I haven't played with it yet because it looks a bit scary... and support is non-existent [2]... oh well. The @font-face rule apparently will allow us to reference fonts on the web and use them in web pages, but until then perhaps sIFR is an option [3] [1] http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions [2] http://www.westciv.com/style_master/academy/browser_support/basic_concepts.html [3] http://www.mikeindustries.com/sifr/ best, Rob __ 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/
