[css-d] position:relative
I have a table with html code
style
div.scroll
{
height:150px;
overflow:auto;
}
table.scrollable th
{
position:relative;
}
/style
div class=scroll
table class=scrollable
theadtrtdheading1/tdtdheading2/tdtdheading3/td/tr/thead
tbody
trtdvalue1/tdtdvalue2/tdtdvalue3/td/tr
//repeated 100 times
/tbody
/table
/div
this gives me a nice scrollable table with a fixed header. This is a stand
alone.
When I include the same code in my jsp file, I get a scroll bar, but my header
is not fixed. My jsp respects the overflow:auto attribute, but does not
respect the position:relative attribute.
I did not add the standard !doctype here, but its there in my code.
any help?
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] position:relative
On 26/12/06, Raghavender Srimantula [EMAIL PROTECTED] wrote: this gives me a nice scrollable table with a fixed header. This is a stand alone. When I include the same code in my jsp file, I get a scroll bar, but my header is not fixed. My jsp respects the overflow:auto attribute, but does not respect the position:relative attribute. The problem cannot be because the page is being generated by JSP. In summary: The code example I snipped works, but you don't say if that was the complete example or if there was any other code involved for your testing, nor do you say which browsers you tested it in. Another code example, which you haven't provided, doesn't work, but you don't say what it does do, or what browsers you tested it in. I did not add the standard !doctype here, but its there in my code. In what code? The real test code that works? The final page which doesn't work? I think you need to provide more information, and complete examples of the problematic and working code (preferably in URL form). -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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] position:relative
Raghavender Srimantula wrote: [... code ...] this gives me a nice scrollable table with a fixed header. This is a stand alone. The use of 'overflow: auto' / 'position: relative' may, or may not, give you a fixed table header across browser-land. Especially unclear in IE/win, where 'R:P' can be used to simulate 'position: fixed/absolute' when combined with 'overflow'. The standardized use of 'position: relative' is for stacking (with a z-index) and for offsetting an element from its original position without affecting the space taken in its original position. Thus, no standardized 'fixing-effect'. When I include the same code in my jsp file, I get a scroll bar, but my header is not fixed. My jsp respects the overflow:auto attribute, but does not respect the position:relative attribute. It's impossible to figure out exactly why something doesn't work as expected, without seeing the complete document/code those browsers are supposed to handle. We need a link to the actual document. 'Position: absolute' is supposed to fix an element's position relative to a container... http://www.w3.org/TR/CSS21/visuren.html#choose-position regards Georg -- http://www.gunlaug.no __ 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] position:relative
Raghavender Srimantula wrote: [... some code ...] this gives me a nice scrollable table with a fixed header. This is a stand alone. When I include the same code in my jsp file, I get a scroll bar, but my header is not fixed. My jsp respects the overflow:auto attribute, but does not respect the position:relative attribute. I did not add the standard !doctype here, but its there in my code. any help? Given your example I can only guess: Maybe your jsp adds some XML or other comment prior to the standard doctype declaration. This would put IE into quirks mode and keep the header from staying fixed. But this is only guessing. Rainer -- www.rohschnitt.de __ 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] mac/ie5.2 float drop
Browsercam http://www.browsercam.com/public.aspx?proj_id=310474 shows right column float drop on this page http://tinyurl.com/ww9gb at 1280. Suggestions for correction appreciated. Thanks. ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] opera or FF rtl bug
which of the above has the bug : http://test.dekkers.net/test.aspx the logo and 2 other images display correct in FF(2,3) but not in Opera(latest) Thanks Ido __ 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] Misbehaving Coloured bands
Hello Everyone
I'm hoping you can help me solve this issue, which I think is IE related...
http://www.cottonliving.co.uk/ProductList.aspx?CategoryID=2
Please check out the above page and you will see that the coloured band
above the image is not positioning properly. The two rules I added to my
stylesheet to control the band are as follows:-
/* This rule controls the display of the image/column in the repeating
list*/
#MyProductList_MyList {
position: relative;
width: 200px;
}
/* This rule was intended to make the coloured band stick to the same
position as the image */
#MyProductList_MyList .attention {
position: absolute;
float:left;
width: 200px;
font-size: 16px;
color: #fff;
background-color:#d31a4f;
}
The full stylesheet can be found here:-
http://www.cottonliving.co.uk/styles/cottonliving.css
It has the desired effect in Firefox but not in IE.
Any help would be really appreciated.
Cheers
Phil
Web Foundry Limited
Web Design and Marketing Services
www.web-foundry.co.uk
[EMAIL PROTECTED]
3 Cluny Gardens
Edinburgh, EH10 6BE
Office: 0131 447 4111
Mobile: 07981 454206
Registered in Scotland No.303224
This message is only for the use of the person(s) to whom it is addressed.
It may contain information which is privileged and confidential.
Accordingly, any dissemination, distribution, copying or other use of this
message or any of its content by any person other than the Intended
Recipient may constitute a breach of civil or criminal law and is strictly
prohibited. Any views or opinions presented are solely those of the author
and do not necessarily represent those of the organisation. If you have
received this e-mail in error, please notify the sender or telephone
+44(0)131 447 4111
__
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] opera or FF rtl bug
Subject: [css-d] opera or FF rtl bug which of the above has the bug : http://test.dekkers.net/test.aspx the logo and 2 other images display correct in FF(2,3) but not in Opera(latest) Only works in FF. IE doesn't work either. quick suggest is to define the left margin. That seems to fix the logo positioning. Also need to move all the links to centre of logo as they sit on top of image. IE6 doesn't render the images at all - no transparency. Happy Xmas!! Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.432 / Virus Database: 268.15.28/604 - Release Date: 26/12/2006 12:23 __ 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] Misbehaving Coloured bands
Phil Holt wrote:
I'm hoping you can help me solve this issue, which I think is IE related...
http://www.cottonliving.co.uk/ProductList.aspx?CategoryID=2
Please check out the above page and you will see that the coloured band
above the image is not positioning properly. The two rules I added to my
stylesheet to control the band are as follows:-
[trimmed]
Phil
Have you tried deleting position: absolute; from ruleset
#MyProductList_MyList .attention {...}?
Regards,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why does IE 7 render div margin wrongly?
On 12/24/06, francky [EMAIL PROTECTED] wrote:
H(o)i Jeroen,
While the question is answered yet, I've some other css philosophical
remarks.
Translating a painted design (illustration) to css has it's pitfalls,
because paper and screen are 2 ways of thinking!
* See: 'The Graphical Designer and the CSS Zen Guru' story
http://home.tiscali.nl/developerscorner/guru-1.htm
In your case, there is a fixed area for the content part by means of the
background image http://www.home.intellit.nl/np/test/background.jpg.
No way to escape from this area! - This will have disadvantages for the
greater screen resolutions (and/or for browser sidebars turned on/off).
If the visitor has a 800x600px resolution, the content is about 60% of
the available screen.
If the visitor is viewing the page with a 1280x1024px monitor, the used
'message part' of the screen is only ... 16%.
* See annotated screenshot 1280x1024
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-intellit.png
So I should strongly advise to start with a more flexible model, letting
the screen of the visitor determine the width and/or height.
This will invoke new questions to solve! For instance:
* Q: what to do with the background?
A: I should make a background without the transparent part in
it, and make it seamless repeatable. Then at large reso's there is
no white around. Compressing the jpg can save 52 of the 66kB's,
which is downloaded 4.5 times faster: example of 14kB
http://home.tiscali.nl/developerscorner/css-discuss/images/intellit-background-new.jpg
* Q: how to make the top bar 'playing now:' flexible and extending /
shrinking if needed?
A: this can be done with a Sliding Doors technique, for instance
the method of Liquid Round Corners
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
The same image can be used for the left and right part: recycled
by css! See new top bar
http://home.tiscali.nl/developerscorner/css-discuss/images/nowplaying_xbmc-new.gif
* Q: how to get transparency in the content part?
A: I see 2 ways: (1) using a small semitransparent white png image
as background image; then there has to be added the rather bits
eating IE png hack; example: test page
http://home.tiscali.nl/developerscorner/transparency/png-gradient-proefje.htm.
Or (2) using the css3-property opacity, which is supported
already by almost all modern browsers. Exception is ... IE, but IE
can be made happy by using an IE-only filter. - old IE5.0 and
Konqueror are degrading to a white background.
If you want the content part to have rounded corners, the same (1)
or (2) has to be applied to them. The top and bottom parted can be
glued as well in one image
http://home.tiscali.nl/developerscorner/css-discuss/images/corners-intellit2000x10.gif
* Q: how to get the sidebar scrollable too?
A: by giving the sidebar the {overflow:auto} property too, or,
what I should prefer, canceling the overflow of the #content, and
putting it to the container of the sidebar and the content; then
they are scrolling together.
As a Dutch proverb says More ways are leading to Rome.
To illustrate:
* Horizontal css flexibilized testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-intellit-a.htm.
:-)
* Some comments inside.
* Link to screenshots: in the page.
Hi Francky,
Thanks a lot for your insight. It was very interesting to read your
CSS Zen Guru article (nicely written ;)) although this design does
actually what it should do, because the content area is actually more
then big enough for the content that will be placed there (I.e.
year/genre/link to lyrics etc). When i would use your scaled layout,
my opinion is, ithere will be too much room for this little content.
But i definitely learned from your comments, thanks!
I use actually a resolution of 1680x1050, and it was designed for
1024x768 and up. But still i agree, when using a large resolution
normally the empty space would be a waste, but in this case is as
designed.
About the JPG compression, true, i could do a bit more. I think around
40kb would still have a reasonable quality.
Thanks again, and happy holidays!
--
Jeroen
__
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] Misbehaving Coloured bands
Thanks David - that did the trick nicely.
Much appreciated.
Phil
On 26/12/06 13:59, ~davidLaakso [EMAIL PROTECTED] wrote:
Phil Holt wrote:
I'm hoping you can help me solve this issue, which I think is IE related...
http://www.cottonliving.co.uk/ProductList.aspx?CategoryID=2
Please check out the above page and you will see that the coloured band
above the image is not positioning properly. The two rules I added to my
stylesheet to control the band are as follows:-
[trimmed]
Phil
Have you tried deleting position: absolute; from ruleset
#MyProductList_MyList .attention {...}?
Regards,
~dL
Cheers
Phil
Web Foundry Limited
Web Design and Marketing Services
www.web-foundry.co.uk
[EMAIL PROTECTED]
3 Cluny Gardens
Edinburgh, EH10 6BE
Office: 0131 447 4111
Mobile: 07981 454206
Registered in Scotland No.303224
This message is only for the use of the person(s) to whom it is addressed.
It may contain information which is privileged and confidential.
Accordingly, any dissemination, distribution, copying or other use of this
message or any of its content by any person other than the Intended
Recipient may constitute a breach of civil or criminal law and is strictly
prohibited. Any views or opinions presented are solely those of the author
and do not necessarily represent those of the organisation. If you have
received this e-mail in error, please notify the sender or telephone
+44(0)131 447 4111
__
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] opera or FF rtl bug
Ido Dekkers wrote: which of the above has the bug : http://test.dekkers.net/test.aspx the logo and 2 other images display correct in FF(2,3) but not in Opera(latest) Before you go any further, consider the following... - Precise positioning of elements on top of a background-image by using em, is a flawed method - regardless of direction. Those elements are not anywhere near their intended position in any of my browsers, simply because their position - in em - rely on font-size. Font-size is not a factor you can control all that well. - Opera has a rounding-effect on large em margins and paddings. See... http://www.brunildo.org/test/emarg.pl - Firefox (2.0.0.1) offers no horizontal scroll, and I need at least a 1450px wide window just to see the entire page. That's the effect of 'minimum font-size: 14px'. It's the same in other browsers, apart from that they give me a horizontal scroll-bar. - Height in em on those anchors means I see both horizontal and vertical repetition of background-images. Pretty confusing link-text, I think. Again: it's the effect of uncontrollable font-size. So, when you want to position anything precisely on top of a fix-sized background, you'll be better of by using a fix-sized unit for positions and dimensions - like px. Also: especially IE tends to be a bit unpredictable when all 'top'/'left'/'right'/'bottom' values are left out and positioning rely on default-positions and margins. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mac/ie5.2 float drop
~davidLaakso wrote: Browsercam http://www.browsercam.com/public.aspx?proj_id=310474 shows right column float drop on this page http://tinyurl.com/ww9gb at 1280. Suggestions for correction appreciated. Thanks. ~dL On an off-list suggestion regarding the complex (percent) width layout, a much simpler (pixel) width layout is now on the server. However, browsercam is /still/ dropping the right column float in mac/ie5.2. ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mac/ie5.2 float drop
David Laakso wrote:
Browsercam
http://www.browsercam.com/public.aspx?proj_id=310474 shows
right column float drop on this page
http://tinyurl.com/ww9gb at 1280.
It could be the fact that IE/Mac sometimes does not respect the assigned
width for floats, making them slightly larger. This doesn't happen when the
text is contained in boxes with a bit of right padding (or margin.) Indeed
the only solution that I know is adding some right padding to your p's:
div#content-b p { margin-right: 0.2em; }
If this really solves the problem (I've probably tested on your first
version), you could just feed it to IE/Mac, for example wrapping it in some
filters like this:
/*\*//*/ div#content-b p { margin-right: 0.2em; } /**/
Best regards,
Bruno
__
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] Scrollbars not appearing in Safari...
We¹re preparing a launch of a newly designed site and although pages display properly, the vertical (and horizontal) scrollbars don¹t appear in Safari. Here¹s a page: http://208.106.199.119/pages/index_alpha.cfm?letter=all Pages work correctly in Firefox and IE. Any ideas? Dean. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mac/ie5.2 float drop
Bruno Fassino wrote:
David Laakso wrote:
Browsercam
http://www.browsercam.com/public.aspx?proj_id=310474 shows
right column float drop on this page
http://tinyurl.com/ww9gb at 1280.
It could be the fact that IE/Mac sometimes does not respect the assigned
width for floats, making them slightly larger. This doesn't happen when the
text is contained in boxes with a bit of right padding (or margin.) Indeed
the only solution that I know is adding some right padding to your p's:
div#content-b p { margin-right: 0.2em; }
If this really solves the problem (I've probably tested on your first
version), you could just feed it to IE/Mac, for example wrapping it in some
filters like this:
/*\*//*/ div#content-b p { margin-right: 0.2em; } /**/
Best regards,
Bruno
Mac/IE5.2 in Browsercam seems pleased with your fix Bruno (I am using
the simplified version of my layout rather than the one you worked on).
Thank you (and Philippe off-list) so much.
Best,
~davidL.
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scrollbars not appearing in Safari...
Dean Heetderks wrote:
We¹re preparing a launch of a newly designed site and although pages
display properly, the vertical (and horizontal) scrollbars don¹t
appear in Safari.
http://208.106.199.119/pages/index_alpha.cfm?letter=all
In...
#content_middle{
...delete...
position: absolute;
...or change it to...
position: relative;
That should make the scroll-bars appear in Safari.
Source-code and CSS need some clean-up.
regards
Georg
--
http://www.gunlaug.no
__
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] Circle Navigation
Hey all, So I'm trying to make a new website today and I have this crazy idea of using a circle navigation. I've searched around but can not find any examples, only some product running rampant around the web. I'm all for using pre-packaged stuff, but I feel like I'm missing something simple and I almost have it working. The idea is to have an outline of a circle with icons on the edge of it. When a user scrolls over the icon, the text appears in the middle of the circle. Even though my div #nav is acting as a containing div for the icons, I can't seem to get the text to see the div #nav as a container. Any ideas? http://dev.martinhdavisiii.com/ The nav is in the top right. Happy New Years, Martin __ 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] Aligning and setting positions in unordered lists
Hi all, I've come across a small positioning problem and can't find anything specifically on this on the web. Can anyone tell me what I need to do? http://www.tellura.co.uk/fenditching/ This holding page demonstrates the problem. The unordered list appears more or less the same in IE6 and Firefox (Mac and PC). The bullets are indented about 20 pixels and the gap between the bullets and the list item text is smaller than I would like. I really want the bullets to be aligned left with the rest of the body text and I'd like a bigger gap between the bullet and the list item text. I could get the effect I want in Firefox by applying a negative margin to the ul element and a text-indent to li. However, this doesn't show in IE. I am sure there must be a cleaner way to do what I want, but can't find anything on this. If anyone can point me in the right direction I'd be grateful. Thanks, Ian. -- [EMAIL PROTECTED] 07973 156616 | 01926 811383 skype: ianmpiper __ 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] Background only filling the initial pane size
I am pretty sure I have run into this problem before and solved it, but for some reason, the solution is eluding me today. The problem can be seen on this page: http://ogio.com/press.php The black background of the content area stops when it hits the boundary of the window pane instead of continuing down the full length of the page. Any idea what I am doing wrong? Thanks, Jonathan __ 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] Circle Navigation
Martin Davis wrote: Hey all, So I'm trying to make a new website today and I have this crazy idea of using a circle navigation. I've searched around but can not find any examples, only some product running rampant around the web. I'm all for using pre-packaged stuff, but I feel like I'm missing something simple and I almost have it working. The idea is to have an outline of a circle with icons on the edge of it. When a user scrolls over the icon, the text appears in the middle of the circle. Even though my div #nav is acting as a containing div for the icons, I can't seem to get the text to see the div #nav as a container. Any ideas? http://dev.martinhdavisiii.com/ The nav is in the top right. Happy New Years, Martin Anything is possible. I like your idea-- don't know that I can help execute it. Food for thought, along similar but different lines (Tantek Celik) http://tantek.com/map.html. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 forms problem, overlapping elements
I'm trying to make my quote form IE7-compatible, but I cannot get the sections that include radio buttons/checkboxes/textareas to clear properly. They're working okay in FF and IE6. Here's the page: http://www.parallaxwebdesign.com/services/quote.php The overlaps for the aforementioned elements are obvious... I've tried setting a bottom margin as a conditional comment for each of these sections with no results. Please tell me what I'm doing wrong here. Debbie __ 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] CSS adding space around form selects ?
Hi
How can I get the code below, to get the form select box to display 5 pixels
below the H4 header at present it is about 20 pixels ?
I would also like there only to be a 5 pixel space after the select box and
the second H4 Header 'Location' again at present this is around 26 pixels ??
Thanks and merry christmas!
#subnav
{
float: left;
background: white;
width: 200px;
border: 1px solid red;
padding-left: 8px;
margin-top: 15px;
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-size: 10px;
}
#subnav h3
{
background-color: #891313;
border-bottom: 2px solid #3b3b3b;
text-transform: uppercase;
color: #FFF;
font-size: 11px;
margin: 0;
padding: 6px 4px;
}
#subnav h4
{
background-color: #e1dfda;
border-top: 2px solid #fff;
text-transform: uppercase;
font-family: tahoma, Arial, Helvetica,Geneva, sans-serif;
color: #232323;
font-size: 10px;
margin: 0;
padding: 7px;
}
.Search {
margin: 0;
font-family: arial,helvetica,sans-serif;
font-size: 11px;
text-align: left;
color: #000;
}
.Select { font-size: 12px; width: 180px; margin-bottom: 5px;}
div id=subnav
h3Restaurant Search/h3
h4CUSINE/h4
div class=Search
form action=# method=post enctype=application/x-www-urlencoded
INPUT type=hidden name=test value=test
select name=t class=Select
option value=0All Cuisines/option
option value=1Afghanistan/option
option value=2African/option
/select
/form
/div
h4LOCATION/h4
div class=Search
form action=# method=post enctype=application/x-www-urlencoded
INPUT type=hidden name=test1 value=test1
select name=t class=Select
option value=0Area/option
option value=1Area1/option
option value=2Area2/option
/select
/form
/div
h3User Log-In/h3
/div
__
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] Circle Navigation
Martin Davis wrote:
The idea is to have an outline of a circle with icons on the edge of
it. When a user scrolls over the icon, the text appears in the middle
of the circle. Even though my div #nav is acting as a containing div
for the icons, I can't seem to get the text to see the div #nav as a
container.
The #nav isn't a container for positioning of those spans, because the
anchors are themselves absolute positioned and the spans will therefore
stay relative to them.
You can add something like the following...
ul#nav li a#menu1 span {top: 50px; left: 0px;}
ul#nav li a#menu2 span {top: 50px; left: 50px;}
ul#nav li a#menu3 span {top: 50px; right: 30px; left: auto;}
ul#nav li a#menu4 span {top: 10px; left: 50px;}
ul#nav li a#menu5 span {top: 10px; right: 50px; left: auto;}
ul#nav li a#menu6 span {top: -30px; left: 50px;}
ul#nav li a#menu7 span {top: -30px; right: 25px; left: auto;}
ul#nav li a#menu8 span {top: -40px; left: -10px;}
...and offset the positions relative to those anchors.
Mind what happens when font-resizing is applied.
You can also position those anchors without using 'A:P' or 'R:P', thus
make your original idea work.
http://dev.martinhdavisiii.com/
regards
Georg
--
http://www.gunlaug.no
__
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] Aligning and setting positions in unordered lists
On Dec 27, 2006, at 10:27 AM, Gunlaug Sørtun wrote:
Ian Piper wrote:
http://www.tellura.co.uk/fenditching/
[...] I really want the bullets to be aligned left with the rest of
the body text and I'd like a bigger gap between the bullet and the
list item text.
Take this basic list-styling...
#content ul {padding-left: 12px; margin-left: .3em;}
#content ul li {padding-left: 20px /* bullet-gap */; margin-left: 0; }
...and adjust values to taste.
Paddings and margins on ul take care of where the entire list lines
up,
and I've added some corrections for font-resizing.
Padding-left on li controls the gap, and margin-left on li gives added
control of where the bullets line up.
By default, the space reserved for the list marker comes from padding-
left (Gecko, Safari, Opera 9, iCab) or margin-left (Explorer Win/Mac)
on the UL.
In this case: zero out margin/padding on the ul, then add 1.2 em
padding-left (that allows for different size of list markers,
depending on the user's font-size.
To increase the space between the list marker and the contents (text)
of the li, add padding-left to the li.
ul {margin: 1em 0; padding: 0 0 0 1.2em;} /* adjust top and bottom
margin to taste */
li {padding-left: 3em /* adjust to taste */}
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background only filling the initial pane size
Jonathan Duncan wrote:
http://ogio.com/press.php
The black background of the content area stops when it hits the
boundary of the window pane instead of continuing down the full
length of the page. Any idea what I am doing wrong?
You have forgotten to tell standard compliant browsers to expand the
wrapper as content grows, so they stop at 100% window-height - as they
are told.
The addition of...
#wrap {display: table;}
...will work in all good browsers - in accordance with standard...
http://www.w3.org/TR/CSS21/visuren.html#q15
http://www.w3.org/TR/CSS21/tables.html#q2
regards
Georg
--
http://www.gunlaug.no
__
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/
