Re: [css-d] Get my DIVs in a row.
Travis Killen wrote:
I am having trouble with my DIVs. How can I make them all appear on the
same row?
http://oit.sfasu.edu/test/getstart.html
I think this the problem:
.threemenu div {
float : left;
clear : left;
}
For what you are trying to achieve, these rules are counterproductive.
The float : left removes each menu from document flow and positions it
across the page (while there is room). In effect, the menus will float
as high and to the left as there is room for, and so align themselves
across the page.
The clear : left tells each menu to float as high as possible *but not
to the right of another float*. Therefore they don't float across the
page, but stack vertically.
Removing the clear : left solves the problem.
BTW, your CSS is rather convoluted - for example you have a lot of
repeated information. The menu styling for example for the most part
could be done in the .threemenu div { } declaration, and only the
differing colours put into .rounded{}, .roundeb{} and .roundedp{}.
CSS shorthand (eg. margin : 0 0 5px 10px; instead of margin-top : 0;
margin-right : 0; margin-bottom : 5px; margin-left : 10px; or border
: solid 1px #fff; instead of border-color : #fff; border-width : 1px;
border-style : solid;) would possibly also help when debugging.
__
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] Nowrap inside a, but wrap between?
I'm redesigning a forum page where I can't touch the html. There is a div containing a variouse number of anchor tags. Eg: div aSearch/a aRecent topics/a aBack to home page/a /div I dont want the words within each anchor to wrap to a new line, but I do want the full anchor to wrap to a new line if it doesn't fit within the width of the div. This might be an easy fix, but my brain hasn't returned from holidays yet.. so thank you in advance! -Eystein __ 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] Nowrap inside a, but wrap between?
Eystein Alnaes wrote: I dont want the words within each anchor to wrap to a new line, but I do want the full anchor to wrap to a new line if it doesn't fit within the width of the div. You can style the anchors, but it isn't easy to get it cross-browser reliable. The only really cross-browser reliable solution is to use non-breaking spaces between the words inside the anchors, and avoid using letters that some browsers may (correctly) use as word-breaks at line-end. regards Georg -- http://www.gunlaug.no __ 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] Nowrap inside a, but wrap between?
Eystein Alnaes wrote:
To bad I can't touch the html. Will have to do with slightly misaligned
lines.
Use...
a {white-space: nowrap;}
That will work in most cases in most browsers.
Georg
--
http://www.gunlaug.no
__
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] Nowrap inside a, but wrap between?
If you want the links to be inline elements, then yeah, do whitespace
nowrap. If you need to be able to control them vertically, you might
want to experiment with just floating each link left.
Mike
On 8/9/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Eystein Alnaes wrote:
To bad I can't touch the html. Will have to do with slightly misaligned
lines.
Use...
a {white-space: nowrap;}
That will work in most cases in most browsers.
Georg
--
http://www.gunlaug.no
__
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] Nowrap inside a, but wrap between?
If you want the links to be inline elements, then yeah, do whitespace
nowrap. If you need to be able to control them vertically, you might
want to experiment with just floating each link left.
a {white-space: nowrap;}
That will work in most cases in most browsers.
I've grabbed the essentials and put them here
http://www.eystein.no/test/forum/post.html
http://www.eystein.no/test/forum/css/template/forum.css
I've inserted nbsp; in the html and used white-space: nowrap. But had to
filter it for IE6 which then didn't wrap anything. Don't want to float it
because I want to keep it centered. Looks good in Firefox, and IE. (I'll
turn the png's into gifs later. BTW - are the Silk icons available in gif?)
BUT - IE is pushing a couple of pixels on the first background-image
(Search) to the oposite side. Any idea as to why? I've tried removing
whitespace and the b in the html, but to no good.
eystein
__
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 Float clear question
Gunlaug Sørtun wrote: Mark Wheeler wrote: Second, Gunlaug - That did the trick. I'm still fairly new at css, trial and error and all that. I never would have thought about using the overflow attribute to contain the div. I skimmed through the w3.org info and didn't fully understand it. I need to read it some more I guess. But in a nut shell (If that's possible) why doe the overflow: hidden make the float work as I wanted it to? Well, the answer is in the text: ... establish new block formatting context. http://www.w3.org/TR/CSS21/visuren.html#q15 That means (among other things) complete separation or isolation from its surroundings, while the container itself behaves in the page-layout as the styling says. If you want a more simplified explanation, Mark and Michael, I wrote a free article on block formatting context article recently: http://www.communitymx.com/abstract.cfm?cid=6BC9D Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Getting horizontal list to span specific width
Magenta Placenta wrote: Is there a way to get a stylized list to span the width of it's parent container? I've tried a width:100% as well as the exact pixel width (784) on the ul, coupled with padding on the anchor tag to give the button text some horizontal padding. This gets me close, but I end up with a slight gap on the far right side. What I ended up doing was classing the first li and applying a pixel width to that. You can see this at: http://designs.inherent.com/dynapsis/build/bioserver.cfm Without that first li classed/width, there is a gap (oh, 10 pixels or so) on the far right button, which becomes very obvious when you do a mouseover to change the background color. You can see this at: http://designs.inherent.com/dynapsis/build/bioserver2.cfm Is there an easier way to accomplish what I've done at the first url above? First of all, thanks so much for providing two URLs, one showing the untouched problem, and one showing your attempted fix. Very helpful. The float on the ul is what is making it shrinkwrap the li's inside. Giving it width: 100% stops the shrinkwrapping and makes it expand to fill the container. Now, this makes the last button wider than the rest, which is probably not what you want either. But what's the alternative? Make the widths of all the buttons get a little wider to eat up that extra space? There's no CSS property to tell them to do this. Essentially you're wanting table cell behavior: take a width and divide it into 9 chunks that are equally spaced. Floating the li's makes their widths dependent on the amount of content inside. You could make the li's display: table-cell, but that's not supported by IE, even IE7.* I suggest changing your design. Remember that not everyone will be using the same font size, so sometimes that list of links will take up two lines, not one. So don't concern yourself so much with making the links perfectly spaced out and filling up the whole strip, because you can only make this happen in very controlled circumstances. What if, instead of this, you center all the buttons? Any extra space will be divided between the left and right sides, which you can separate off from the buttons with borders. This will look good both when the nav bar is one line and when it has to flow onto two lines. Zoe * For a great example of this, check out http://mrclay.org/web_design/tabs/. It doesn't work in IE unless you use JavaScript to change the list into a real table. This might be acceptable to you. Not sure how it works in older browsers, or on a Mac. -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Problems with elastic layout
On 06/08/08 13:01 (GMT+0100) Dave Goodchild apparently typed: Hi all. I have mocked up an elastic layout at the following site: http://s172075788.websitehome.co.uk/stage/ ...following some sound advice I have not enforced a font size, allowing the user to view the site through their default or change font-size as required. However, a larger font sizes on 600x800 the content expands past the browser window, and I do want to set a max-width to that screen size as I know that doesn't work in IE and I also want to cater for larger resolutions without the wrapper appearing small and isolated. Am I going down the right path? Any suggestions at this point, as we are in demo and firm commitments to the design have yet to be made! Others are quick to condemn horizontal scrollbars, but I find small ones, particularly when the result is the full real content remains narrow enough to fit in a full 800px, is in reality no problem at all. Don't forget that at 800x600 with IE resizer sizes larger than medium you're dealing with quite large sizes in most cases. At only larger, the default size is up to a nominal 14pt, which at the default 96 DPI on a true 16 diagonal 4:3 display is actually more than 20pt in real size. On a true 14 diagonal 4:3 display it's still more than 17.5pt. On your page at larger I see an minute scroll that results in no cut off content. At largest on a 16 display the default is up to 16pt nominal, which is 23pt real, and on the 14 20pt real. Even then your real content fits, though the ad space does push out right an inch or so. I wouldn't think any user would consider that a problem. Remember too that 800x600 is a small and dwindling percentage of users. It wouldn't surprise me to see Vista released defaulting to 1024x768, with 800x600 possibly no longer supported. I went into stores recently looking at what was available in laptops. Probably at least 90% of what I saw was widescreen, mostly WXGA (1280x800 native), with a few at 1440x900, 1680x1050 and 1920x1200. Even Sony's little 11.1 natives to 1280x800. No more than 1 or 2 per store were 1024x768, and none were less. Only the smaller 4:3 flat panel displays, 15 or less, have a 1024x768 resolution. The big sellers seem to be larger, 17 and up, and most of them native at 1280x1024. As laptops have been outselling desktops for some time, and the big selling flat panel desktop screens are mostly 1280 wide, 1280 wide is what you can expect more and more of your audience to consist of. -- Let us not become weary in doing good, for at the proper time we will reap a harvest if we do not give up. Galatians 6:9 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ 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] Horizontal Nav Menu
Help! For some reason, I can't figure out a simple horizontal
menu... Nothing complicated, no dropdowns or submenus. Just a simple
set of A tags that I'd like to be displayed horizontally in
uniformly-sized blocks. I'm using an unordered list, and I've set my
LI tags to inline and then the enclosed A tags to block.
Shouldn't that work? For some reason, the A blocks go on their own
lines. I want them to stay on the same line. I have a feeling I'm
missing one little thing to make this work. Any help is appreciated.
[CODE BELOW]
Thanks,
Dean Champeau
body {
text-align:center;
padding-top:60px;
}
#main {
width:702px;
text-align:left;
margin-left: auto;
margin-right: auto;
}
#navmenu ul {
list-style:none;
margin:0;
padding:0;
}
#navmenu ul li {
display:inline;
}
#navmenu ul li a {
display:block;
border:thin solid;
width:114px;
}
body
div id=main
img id=logo src=images/logo.gif/
div id=navmenu
ul
lia href=#Overview/a/li
lia href=#Detail/a/li
lia href=#FAQs/a/li
lia href=#Contact/a/li
/ul
/div
/div
/body
__
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] Nowrap inside a, but wrap between?
Eystein Alnaes wrote:
http://www.eystein.no/test/forum/post.html
That page has an incomplete doctype = quirks mode.
Page looks better in standards compliant mode in all browsers.
BUT - IE is pushing a couple of pixels on the first background-image
(Search) to the oposite side. Any idea as to why?
No idea :-) but adding...
* html .apiForumMenu a {display: inline-block;}
...fixes it, so it's probably an IE-bug ;-)
Georg
--
http://www.gunlaug.no
__
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] form field sizes
I have a website in which all sizes are in ems or %'s. When I change the
font size in the browser in IE6, everything changes size except for the
form inputs: text fields, select's, etc. Any ideas? The relevant css is
below.
html {
background:#fff;
font-family:Arial, Helvetica, sans-serif; /* set the default font
for the page in IE */
font-weight:bold; /* set the default font for the page in IE */
height:100%;
overflow:hidden; /* trick IE into making absolutely positioned
elements behave as fixed */
width:100%;
}
body {
background:#fff;
color:#bbb;
font-size:medium;
height:100%; /* trick IE into making absolutely positioned
elements behave as fixed */
letter-spacing:.15em;
overflow:hidden;
width:100%;
}
input, textarea, select {
background:#fff;
border-bottom:#999 solid 1px;
border-left:#999 dotted 2px;
border-right:#999 dotted 2px;
border-top:#999 solid 1px;
color:#333;
font-size:inherit;
padding:0 .3em;
vertical-align:middle;
}
--
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
__
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] IE 7 beta 3 and Negative Margin
On 8/9/06, Yuna Boelmans [EMAIL PROTECTED] wrote: when you use negative margin on the p, it puts it on top of each other in Firefox and ie6, i suppose it would do the same in ie7 as in Firefox. But that's the problem, it *doesn't* in IE 7. try removing the negative margin. But the whole point is to have the borders on top of each other. So I *have* to use the negative margin. Period. Regards, Tyson __ 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] form field sizes
[EMAIL PROTECTED] wrote:
I have a website in which all sizes are in ems or %'s. When I change the
font size in the browser in IE6, everything changes size except for the
form inputs: text fields, select's, etc. Any ideas? The relevant css is
below.
You need to add widths to these elements -- using ems. Ems are wider If
you have an input of max 20 characters, start off with about 10em for
width, and adjust to taste.
input, textarea, select {
background:#fff;
border-bottom:#999 solid 1px;
border-left:#999 dotted 2px;
border-right:#999 dotted 2px;
border-top:#999 solid 1px;
color:#333;
font-size:inherit;
padding:0 .3em;
vertical-align:middle;
}
--
Joel Goldstick
www.columbuswebmakers.com
__
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] Extra Division Height with IE
On the top of the following page I wanted to put an image on the right left
and center of a logo division.
Richardhhall.org
It works fine in firefox (mac PC) and safari, but with IE on PC the
division (grey color) be bigger than 54px, which is the size I defined, so
there is some space around the 54px high images that I don't want.
The html for the logo is
div id=logo
img style=float:left
src=http://richardhhall.org/images/top_left.jpg; alt=Richard
Scream Face width=59 height=54
img src=http://richardhhall.org/images/top_logo.gif;
alt=RichardHHall.org width=243 height=54
/div
The CSS for logo is
#logo {
width: auto;
height: 54px;
background-color : Silver;
background-image:url(http://richardhhall.org/images/rhall.jpg);
background-position : right;
background-repeat : no-repeat;
text-align:center;
}
... Any help appreciated ... Thanks ... Richard
--
Richard H. Hall
http://www.umr.edu/~rhall
Save the internet - Preserve Network Neutrality!
http://www.savetheinternet.com
__
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] IE 7 beta 3 and Negative Margin
On 8/9/06, Yuna Boelmans [EMAIL PROTECTED] wrote: o, i'm sorry, i thought you meant '1 above the other'. have you tried position relative? Relative positioning doesn't work (nor should it because you don't need position: relative to use negative margins. Regards, Tyson __ 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] Extra Division Height with IE
richard hall wrote:
On the top of the following page I wanted to put an image on the right left
and center of a logo division.
Try setting div with id=main to have margin set to 0. Also try setting
body padding to 0.
Each browser has different default values for padding and margins. Some
people prefer to set all to 0 like so:
* {padding: 0; margin: 0}
and then add back just where they want.
--
Joel Goldstick
www.columbuswebmakers.com
__
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] form field sizes
All of the fields have widths individually assigned. There are several
hundred of them, so I thought it prudent not to include them. ;-)
I used ems to assign the width.
--
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
You need to add widths to these elements -- using ems. Ems are wider If
you have an input of max 20 characters, start off with about 10em for
width, and adjust to taste.
input, textarea, select {
background:#fff;
border-bottom:#999 solid 1px;
border-left:#999 dotted 2px;
border-right:#999 dotted 2px;
border-top:#999 solid 1px;
color:#333;
font-size:inherit;
padding:0 .3em;
vertical-align:middle;
}
--
Joel Goldstick
__
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] Extra Division Height with IE
Morning Richard You wrote On the top of the following page I wanted to put an image on the right left and center of a logo division. Richardhhall.org It works fine in firefox (mac PC) and safari, but with IE on PC the division (grey color) be bigger than 54px, which is the size I defined, so there is some space around the 54px high images that I don't want. snipped ... Any help appreciated ... Thanks ... Richard -- Richard H. Hall Add display:block to your image selector images are normally in-line elements resting on the baseline not the bottom of the box. That leaves room for the descenders of lower case letters like j and y You can also use vertical-align:bottom on the img selector... hth Jim Nannery www.beebar.net __ 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] form field sizes
I have a website in which all sizes are in ems or %'s. When I change the font size in the browser in IE6, everything changes size except for the form inputs: text fields, select's, etc. Any ideas? The relevant css is below. Have you tried changing font-size:inherit to font-size:100%? That avoids having to assign a set width to the elements but allows them to scale when the user changes the font size. -Mark __ 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] Sliding door rounded corner boxes
Thanks Franky
Between yours and Nick's replies, I've nearly got it working, except for
some extra padding or something on to of the video box.
Still trying
Pete
-Original Message-
From: francky [mailto:[EMAIL PROTECTED]
Sent: 08 August 2006 22:18
To: Nick Fitzsimons
Cc: [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Subject: Re: [css-d] Sliding door rounded corner boxes
Nick Fitzsimons wrote:
Pete Home wrote:
I thought I had followed the research to the letter, but I still
cannot get 'nested' boxes to work.
Basically I want a outline around 2 divs when one of then has a box
within it.
Here's the code and CSS links;
www.cityboxer.com/gambling/betting.htm and
www.cityboxer.com/gambling/newcss.css
The outline box seems to work on 3 of 4 sides in ie6 and the inner box
with the video is correct. In FF1.5 it's a complete mess (even though
the outline box works, it doesn't encompass the inner divs) and the
inner box is a complete hash.
First rule of CSS development: if it looks right in IE6, it's (usually)
broken :-)
Hi Pete,
Agree! ;-)
Within the inner box you have two divs, section_content and video,
which are floated left and right respectively. When an element is
floated, it is taken out of the normal document flow - in other words,
the block that contains it acts as if it isn't there. _Not_ honouring
this rule is one of the major bugs in IE6, and is one of the primary
reasons why testing in IE6 should only be done after you've got it
looking right in Firefox, Opera, Safari and suchlike
standards-compliant browsers. If you do this then it'll probably look
broken in IE6, but then you can apply various workarounds and hacks to
bring IE6 into line.
Adding just a clearing div after closing the div id=video will help
all browsers, even IE. :-)
In this case, have a look at:
http://www.positioniseverything.net/easyclearing.html
which should help you sort it out. Note that IE7 fixes the float
container bug, so you'll need to check the layout in that, too: if you
have problems, somebody here will help :-)
Cheers,
Nick.
The black top bar in the #video background, appearing in FF: this is due to
the default margin for the h2 below; IE is (against css-rules) extending the
box, so it seems IE = right. But adding a {margin: 0;} is helping, even
without collapsing IE.
See also source code in: testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-cityboxer.htm.
:-)
Greetings,
francky
btw 1: Check the html-validator
http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.cityboxer.com%
2Fgambling%2Fbetting.htm
and also the css-validator
http://jigsaw.w3.org/css-validator/validator?profile=css2warning=2uri=htt
p%3A%2F%2Fwww.cityboxer.com%2Fgambling%2Fnewcss.css
every now and then; there are some errors and typo's (which can give strange
effects in one or more browsers).
btw 2:
You are using quite big images for the corners. A small combined image for
the boxborder (743 bytes):
http://home.tiscali.nl/developerscorner/css-discuss/images/cityboxer-boxbord
er.gif
and a small one for the video-box (377 bytes):
http://home.tiscali.nl/developerscorner/css-discuss/images/cityboxer-blkbox.
gif
can be enough; with some background positioning all corners can be put in
the right place.
See for instance:
http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgar
den-01.htm
__
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] Sliding door rounded corner boxes
Thanks Nick Between yours and Franky's replies, I've nearly got it working, except for some extra padding or something on to of the video box. Still trying Pete -Original Message- From: Nick Fitzsimons [mailto:[EMAIL PROTECTED] Sent: 08 August 2006 18:05 To: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Sliding door rounded corner boxes Pete Home wrote: I thought I had followed the research to the letter, but I still cannot get 'nested' boxes to work. Basically I want a outline around 2 divs when one of then has a box within it. Here's the code and CSS links; www.cityboxer.com/gambling/betting.htm and www.cityboxer.com/gambling/newcss.css The outline box seems to work on 3 of 4 sides in ie6 and the inner box with the video is correct. In FF1.5 it's a complete mess (even though the outline box works, it doesn't encompass the inner divs) and the inner box is a complete hash. First rule of CSS development: if it looks right in IE6, it's (usually) broken :-) Within the inner box you have two divs, section_content and video, which are floated left and right respectively. When an element is floated, it is taken out of the normal document flow - in other words, the block that contains it acts as if it isn't there. _Not_ honouring this rule is one of the major bugs in IE6, and is one of the primary reasons why testing in IE6 should only be done after you've got it looking right in Firefox, Opera, Safari and suchlike standards-compliant browsers. If you do this then it'll probably look broken in IE6, but then you can apply various workarounds and hacks to bring IE6 into line. In this case, have a look at: http://www.positioniseverything.net/easyclearing.html which should help you sort it out. Note that IE7 fixes the float container bug, so you'll need to check the layout in that, too: if you have problems, somebody here will help :-) Cheers, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ 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] form field sizes -SOLVED-
That's it! Thanks! -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 I have a website in which all sizes are in ems or %'s. When I change the font size in the browser in IE6, everything changes size except for the form inputs: text fields, select's, etc. Any ideas? The relevant css is below. Have you tried changing font-size:inherit to font-size:100%? That avoids having to assign a set width to the elements but allows them to scale when the user changes the font size. -Mark __ 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] Show more text using CSS
Have another programming quandary that I'm hoping I can get the list's help on...I'm not even sure what the technique is called so I'm not coming up with much so far by Googling for tutorials. Basically, we need some way to code a Show More function that would allow us to take a long piece of text, shorten it to X maximum lines, then have a Read more link that when clicked would display the rest of the text on the page below the first half. Example of what I'm talking about: http://chocolateandzucchini.com/ (At the bottom of the Aug. 7 posting there is a continues link) We want to use this function for our new faculty profiles pages because some bios are way too long. Right now we're posting the additional bio text as PDFs, which I do not find to be a good idea. Example bio page: http://www3.law.northwestern.edu/faculty/profiles/RonaldAllen/ I'm fine if we will have to use a mix of CSS and JavaScript. I just need a solution for how to display longer bios w/o having to resort to PDFs. Thanks! Janet __ 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 bug? Left-floated nav bar flickers in IE only
Hi,
I am desperate. I have a simple school site launching in a week and can't find
a fix! I have this issue ONLY in Internet Explorer.
I have a left nav bar that is floated to the left. Each link in the nav bar is
a list item. Within the lists item, the a link has ah a different color for
the hover mode. My issue is this: This nav bar renders correctly on Opera and
FireFox, but not on IE 6.0. On IE, the left nav flickers whenever the pointer
hovers, a very nasty, jarring effect. What could be wrong?
Here my URL for the web page: http://www.elcarmelo.paloaltopta.org/
(production site)
OR
http://cpotochny.com/PTA/ (development site)
And the style sheet: http://cpotochny.com/PTA/PTA.css (on the developlment
site)
I am copy/pasting the styles that pertain to the lef nav below, if that's
easier:
#navigation {
padding: 0px;
margin-top: 40px;
margin-right: 0px;
margin-bottom: 0px;
width: 175px;
float: left;
position: relative;
}
#navigation ul {
margin: 0px;
list-style-type: none;
padding: 0px;
}
#navigation li {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FF;
margin: 0px;
padding: 0px;
}
#navigation a:link {
font-weight: bold;
color: #FF;
text-decoration: none;
display: block;
padding: 9px 5px 9px 0.5em;
margin-right: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
background-image: url(images/gradientW175.gif);
background-repeat: repeat-y;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #66;
width: 175px;
}
#navigation a:visited {
font-weight: bold;
color: #FF;
text-decoration: none;
display: block;
padding: 9px 5px 9px 0.5em;
margin-right: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
background-image: url(images/gradientW175.gif);
border-left-width: 5px;
border-left-style: solid;
border-left-color: #66;
background-repeat: repeat-y;
width: 175px;
}
#navigation a:hover {
font-size: 0.9em;
display: block;
color: #FF;
background-image: url(images/gradient_hoverW175.gif);
width: 175px;
}
#navigation a:active {
font-weight: bold;
color: #FF;
text-decoration: none;
display: block;
padding: 9px 5px 9px 0.5em;
margin-right: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
background-image: url(images/gradientW175.gif);
background-repeat: repeat-y;
width: 175px;
}
Christine
__
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] Fluid design, centered cropped flash when browser resized
I've got a flash file centered on my page, and I'm going to be using it in a fluid design. Is there anyway that I can get the flash to stay centered even when the browser is resized to be smaller than the width of the flash file? It seems like all flash files become left justified as the browser width meets the width of the flash file, and then the flash just crops on the right (with overflow:hidden). I'm not sure if I worded that exactly right, but I through up this page to try to show what I mean: http://www.rit.edu/~932www/rit/flashcrop.html If you resize your browser so it's smaller than that flash file, how can I get it to crop the flash on the left and right, not just the right? (Obviously, that's not my flash file, it's just used as an example... My flash file will be 1024px wide, but I want the center of the flash file to appear even if the browser is resized to 800px wide. Thanks in advance, -o- Jared Lyon RIT University Publications __ 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] Show more text using CSS
Have another programming quandary that I'm hoping I can get the list's help on...I'm not even sure what the technique is called so I'm not coming up with much so far by Googling for tutorials. Basically, we need some way to code a Show More function that would allow us to take a long piece of text, shorten it to X maximum lines, then have a Read more link that when clicked would display the rest of the text on the page below the first half. There is no obvious CSS-only solution (cssplay.co.uk has one though) but in terms of browser compatibility and usabilty (keyword enabling for starters), this should be done with a mix of CSS and JS. I will create a demo in a moment. The snag you will run into though is that there is no such thing as after x lines, as with different font sizes, there'll be more or less lines. -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ 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] Extra Division Height with IE
Jim, Thanks very much. Just wanted to let you know FYI ... Setting img to display:block solved the problem except that with firefox the image I wanted to center now did not respond to the text-align center I set for the logo division. So I set that image to display:inline and it centered, but, since it was the exact height I wanted the log division to be the IE problem came back putting spaces around the image. Luckily, that particular image did not have to be the whole height of the division, so I cropped it a little, which solved the IE problem, but the image aligned to the top and I couldn't get the browsers to respond to vertical-align of any sort. So I made the grey part of the image a little taller on top so it sort of aligns in the middle. Interesting ordeal. ... Thanks very much for your help! ... Richard On 8/9/06 12:06 PM, Jim Nannery [EMAIL PROTECTED] wrote: Morning Richard You wrote On the top of the following page I wanted to put an image on the right left and center of a logo division. Richardhhall.org It works fine in firefox (mac PC) and safari, but with IE on PC the division (grey color) be bigger than 54px, which is the size I defined, so there is some space around the 54px high images that I don't want. snipped ... Any help appreciated ... Thanks ... Richard -- Richard H. Hall Add display:block to your image selector images are normally in-line elements resting on the baseline not the bottom of the box. That leaves room for the descenders of lower case letters like j and y You can also use vertical-align:bottom on the img selector... hth Jim Nannery www.beebar.net -- Richard H. Hall http://www.umr.edu/~rhall Save the internet - Preserve Network Neutrality! http://www.savetheinternet.com __ 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] Show more text using CSS
At 01:35 PM 8/9/2006, Christian Heilmann wrote:
Have another programming quandary that I'm hoping I can get the list's help
on...I'm not even sure what the technique is called so I'm not coming up
with much so far by Googling for tutorials.
Basically, we need some way to code a Show More function that would allow
us to take a long piece of text, shorten it to X maximum lines, then have a
Read more link that when clicked would display the rest of the text on
the page below the first half.
There is no obvious CSS-only solution (cssplay.co.uk has one though)
but in terms of browser compatibility and usabilty (keyword enabling
for starters), this should be done with a mix of CSS and JS. I will
create a demo in a moment. The snag you will run into though is that
there is no such thing as after x lines, as with different font
sizes, there'll be more or less lines.
--
Chris Heilmann
Thanks, Chris. I look forward to seeing your demo. I managed to find one
tutorial on hierarchical menus using a mix of CSS and JS
(http://www.oreillynet.com/pub/a/javascript/2002/02/22/hierarchical_menus.html),
and I wonder if I should apply this method for my page?
But he says that style.display is not compatible across all browsers (at
least at the time of the article's publication in 2002) so make sure you
start your script by using browser detection to redirect users with
non-compliant browsers?
Here is a copy of his script:
script language=JavaScript
!--
var plusImg = new Image();
plusImg.src = ./images/plus.png
var minusImg = new Image();
minusImg.src = ./images/minus.png
function hideLevel( _levelId, _imgId ) {
var thisLevel = document.getElementById( _levelId );
var thisImg = document.getElementById( _imgId );
thisLevel.style.display = none;
thisImg.src = plusImg.src;
}
function hideAll() {
hideLevel(chapters, chapImg);
hideLevel(projectlinks, projImg);
hideLevel(interestlinks, intsImg);
}
function showLevel( _levelId, _imgId ) {
var thisLevel = document.getElementById( _levelId );
var thisImg = document.getElementById( _imgId );
if ( thisLevel.style.display == none) {
thisLevel.style.display = block;
thisImg.src = minusImg.src;
}
else {
hideLevel( _levelId, _imgId);
}
}
// --
/script
__
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] Show more text using CSS
Basically, we need some way to code a Show More function that would allow us to take a long piece of text, shorten it to X maximum lines, then have a Read more link that when clicked would display the rest of the text on the page below the first half. There you go: http://icant.co.uk/sandbox/morecontentlinks/ I didn't use any fancy word counting or anything, but instead you need to set a div with the class more around all the elements you want hidden. -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ 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] Show more text using CSS
At 02:36 PM 8/9/2006, Christian Heilmann wrote: Basically, we need some way to code a Show More function that would allow us to take a long piece of text, shorten it to X maximum lines, then have a Read more link that when clicked would display the rest of the text on the page below the first half. There you go: http://icant.co.uk/sandbox/morecontentlinks/ I didn't use any fancy word counting or anything, but instead you need to set a div with the class more around all the elements you want hidden. -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Great, thanks! I will play around with implementing it on our pages. One more thingHow would you do a Hide link to make the extra text disappear after you're done reading it? __ 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] Absolute Position Span in list
First let me thank the list for the help. Thank you, Thank you! Now I am trying to create an effect like eric meyers pure css popups. http://meyerweb.com/eric/css/edge/popups/demo.html However I cannot get my spans to position: absolute; http://oit.sfasu.edu/test/getstart.html PS I know my css is messy, but I use eclipse style, which won't support margin : 0 0 5px 10px; -TK __ 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/
