Re: [css-d] Rounded Corners -- Simplest Way
On 7/8/08, Sohail Aboobaker [EMAIL PROTECTED] wrote: Hi, What is the simplest way to create rounded corners using CSS. I saw a technique using 3 extra div tags for three corner images (left-bottom, right-bottom, left top) which seemed cumbersome and the posting was old. Are there any newer and simpler ways of creating rounded boxes containers? Depends on your requirements: The need for multiple elements is based on the idea that using background images as corners is morally better than adding foreground images (and looks less ugly in the absence of stylesheets) - you need one element to hang each background on*. If you have a fluid-width, fluid height box, you therefore need four elements. If the box is fixed-width, you only need two. If it has a fixed height as well, you can get away with one, but I'd only risk this on an element containing nothing but a single image. If the element has borders, it gets more complex: I've seen methods using 8 elements (just as bad as a table) or using positioning jiggles with mixed success. The wiki has a pretty comprehensive round-up of methods. *Until everyone implements the backgrounds module of css3, at which point rounded corners will become much easier, but I'm picking that everyone will support border-radius before that. -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ 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] EM based layout issue between Firefox and Safari on Mac
Alan, Thank you for your concern, I would point you to this link as a single example of where I am coming from. http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ Cheers, J. On Jul 10, 2008, at 12:38 AM, Alan Gresley wrote: Jason Campbell wrote: Of course, if you can accidentally change your default font setting, your visitor can deliberately change his or her default font setting, too, and upset all your design calculations. Perhaps it's better to think in terms of a 1em grid than a 10px grid ... David Jones, Content Coordinator, Information and Technology Management, Customer Relations - KL PS, (808) 948-5830 David, You are absolutely right the visitor could change their default font settings, they can also increase or decrease the font size on the fly. Which is why I think of it as a foundation, I'm using ems with an expectation that the user can change the font size. Setting it to 10px just helps me work my grid out initially. I have no delusions of it being set in stone, but it gives me a place to start one that I can wrap my mind around without too much effort ; ) heh. Cheers, J. There is no place that you can start if your design is based on a grid. By designing a grid you are creating a design based in stone. The more you try to create a dimensional design (especially with ems) the more you cast your design in stone. Go this page. http://www.jasoncampbell.com/CSS/ And via Tools | Options | Content, select 30px from Fonts Colors. Notice how a horizontal scrollbar occurs and the grid is sitting to the left edge of the viewpoint. Is this the layout that you are seeking? -- Alan http://css-class.com/ Nearly all men can stand adversity, but if you want to test a man's character, give him power - Abraham Lincoln __ 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] Reference docs for Internet Explorer Mobile?
Hi, I'm working on slowly making an iPhone web application into a more generic cross-browser mobile web application. At the moment I am trying to get it to work and look nice on Internet Explorer Mobile Edition. I intend to initially target Windows Mobile 6.x, with a view to adding support for 5 if we think it needs it. Unfortunately I am finding very little help online on what Internet Explorer Mobile supports in terms of CSS. For example, it doesn't *seem* to support IE conditional comments. I can't seem to find a way to adjust the font-size, which is a major problem as the font-size is ridiculously huge on the Windows Mobile device I'm testing on at the moment. Any pointers would be very gratefully received. TIA. Best, Darren __ 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] Width problems with IE7 FF (Content wider in FF)
Hi there, Many thanks for for your kind help. It was good to see what you removed and what was added :) To me, the initial typography is too big. But as you say, it's a personal thing. You have been very helpful. Thank you Kind regards Karl /After Philippe/, and with correction of the quirksmode issue he raised, how about we take it up a couple of notches beyond that and try to provide what is also needed to make it work beyond removing the comment above the doctype, validate the markup, ditch some of the redundant and unnecessary code; and, as important (to me, at least) since you posted on another another thread yesterday regarding typography, attempt to make the page readable for children of all ages? Please see the changed source file with change of doctype and different character encoding than you had along with the many changes/comments made to the CSS file. Cursory checked in IE/6, IE/7 and some compliant browsers. html http://www.chelseacreekstudio.com/ca/cssd/v.htm css http://www.chelseacreekstudio.com/ca/cssd/v_files/master00.css HTH J. M. W. Turner -- http://chelseacreekstudio.com/ -- Regards Karl Bedingfield __ 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] Positioning PHP buttons
Hayden's Harness Attachment wrote: http://www.choroideremia.org/new/crf_header.php With Firefox 3.0. You get a page that I would like to see in every browser. If you downarrow twice everything moves over and I get my Font switcher buttons at the very top left of the screen. I am trying to move them to underneath the curve graphic. The CSS is: Any ideas on how to get my PHP buttons to align under my curve graphic? HTML http://www.choroideremia.org/new/crf_header.php Angus MacKinnon Yes. Start over from scratch with a clear mind and a clean sheet. Too many hands have waved an incense burner filled with absolute positioning over it during the past few months. It will fold to an 800 window (your requirement from a few weeks ago), now. The CSS for the entire page is embedded [1]. Cursory checked in Mac browsers, and PC XP IE/6 IE/7. Any external style sheet (s) you add must not include reference to #header or h1 or they may adversely influence what is now embedded. Incidentally, your main external style sheet is filled with invalid CSS comments, html comments, and PHP comments, all of which trips up not only the CSSvalidator, but the software (browsers) as well. Of course, making sure that the back-end is locked down; and, presenting valid markup, before posting will help ensure more and speedier responses from the list climbs down from soap box. [1] http://chelseacreekstudio.com/ca/cssd/angus.htm Warmly, Helen PS Please reply to the list. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] EM based layout issue between Firefox and Safari on Mac
Jason Campbell wrote: Alan, Thank you for your concern, I would point you to this link as a single example of where I am coming from. http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ Cheers, J. And bumping up the text size by 2 on any of those linked sites causes overlapping to occur. -- Alan http://css-class.com/ Nearly all men can stand adversity, but if you want to test a man's character, give him power - Abraham Lincoln __ 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] :: Highlight Dropdown Menu ::
Hi Everybody, I am having fun with pure CSS dropdowns since morning. I have already used dropdowns by tedd Sperling (thanks tedd) and now trying myself on Eric Meyer style. Everything is going good and I have successfully created dropdowns. Now there is one thing left which I want to accomplish, maybe its simple but I cudn't figure it out. This is the site: http://awayback.com/wardle/index.html Goal: I want the parent menu item *wardle co.* text color WHITE when I hover at its dropdown list items i.e. Item-1 etc. I don't know whether its possible or not. Although I tried with it for couple of hours however its better to ask experts instead of wasting more time. Thanks in advance. Regards, Amrinder www.awayback.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Link attribute syntax
h3.titre a {
color: #eef;
}
should do it...
On Wed, Jul 9, 2008 at 6:20 PM, Colin Mcgarry [EMAIL PROTECTED] wrote:
I'm sure my problem is ridiculously simple but it's driving me mad.
Firefox tells me my link is
div#contenuliste-articleul .somm-titrelih3.titrea
What is the syntax for setting the color of the link.
i've tried
a.h3.somm-titre{
color: #eef;
}
a.somm-titre{
color: #eef;
}
a.h3.titre{
color/#eef;
}
cpmac
but it stays black . The general a attribute is at the top of the css
file.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image background question
On Wed, Jul 9, 2008 at 10:47 PM, Kelly Moore [EMAIL PROTECTED]
wrote:
trying to figure out how to use a small image (such as a fat arrow) as
a background. want to be able to re use the arrow and place different
numbers over it. I've tried the following, but the arrow does not
display:
h3 span.arrow{
height: 5px;
width: 24px;
margin: 10px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
}
h3span class=arrow2./span something here/h3
any ideas?
If I were you I would just stick the background on the h3 as that's
already being displayed as a block by default. Then put the number in a
span like so:
HTML:
h3span class=number3/spanheading text/h3
CSS:
h3 {
background: url(yourimage.png) no-repeat;
height: 20px; /* height of your image */
}
span.number {
float: left;
width: 20px; /* width of your image */
text-align: center;
margin-right: 10px; /* distance from your image to the rest of the h3 */
line-height: 20px; /* height of your image, to make the number center
vertically */
padding-left: 0; /* add padding if your image isn't symmetric */
padding-right: 0; /* same, don't forget to deduct padding from the width
above */
}
My 0.02 ;)
__
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] Opera sees content and draws a scrollbar, others ok
Hi. I've got a site with a fixed (em-based) height (I know, but the
client insisted). It makes use of overflow: auto to cope with long
passages of text.
On some of my text links I've included supplemental information that
becomes visible only on :focus (the mouse users generally get
similarly-worded tooltips instead). An example markup would be:
a href=#foo title=this is valid anchor textspan
class=onfocustextthis is valid/spananchor text/a
CSS:
a .onfocustext {position: absolute; left: -px;}
a .onfocustext:focus {position: relative; left: 0;}
This works fine in browsers including (for a change) IE. Except opera.
On pages where these focus-enhanced links appear within the overflow:
auto parent div, Opera seems intent on seeing invisible content and
drawing a scrollbar. Also, clicking a link designed to jump to a
fragment further down in the overflowed content scrolls the entire
browser window, not the scroll bar on the overflowing div.
'Focus-enhanced' links *not* inside the overflow: auto div do not
trigger this phenomenon.
I was initially seeing this behaviour on webkit browsers and Firefox
as well, until I realised that the parent div lacked a position:
relative rule. That corrected the problem in those browsers, but I
can't work out why Opera is still complaining. I don't know whether
it's a bug or whether it's reacting to something in the CSS that the
other browsers are more forgiving of.
An example page giving the trouble:
http://novatest.sharkattack.co.uk/development.php
I'm seeing the same thing in both mac and windows versions of opera (v.
9.5.1)
Can anyone help?
--
Rick Lecoat
www.sharkattack.co.uk
__
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] li:hover for IE6
Hi,
It must a really newbie question but is li:hover doesn't behave correctly in
IE. The following in the stylesheet does not change the background color in
IE where it works fine with firefox.
#secnavul li.hover {
background-color:#B5761C;
text-decoration: none;
}
The color doesn't change in IE. Same style when applied to #secnavul li
a:hover seems to work fine in IE and Firefox.
Is there a workaround?
Also, background images with .png are not supported in IE6. Is this true?
Regards,
Sohail Aboobaker.
__
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] :: Highlight Dropdown Menu ::
At 10:34 PM +0530 7/10/08, Amrinder wrote: Goal: I want the parent menu item *wardle co.* text color WHITE when I hover at its dropdown list items i.e. Item-1 etc. I'm not sure what you're asking. Do you want the parent menu background to stay white? If so, that's in the section entitled /* menu at mouse-over */ However, if you change that, then all the parent menus will stay white as well. Please explain what you're trying to do. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] li:hover for IE6
Sohail Aboobaker wrote:
Hi,
It must a really newbie question but is li:hover doesn't behave correctly in
IE. The following in the stylesheet does not change the background color in
IE where it works fine with firefox.
#secnavul li.hover {
background-color:#B5761C;
text-decoration: none;
}
The color doesn't change in IE. Same style when applied to #secnavul li
a:hover seems to work fine in IE and Firefox.
Is there a workaround?
Also, background images with .png are not supported in IE6. Is this true?
Regards,
Sohail Aboobaker.
__
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/
Sohail:
IE 6 only supports :hover for A tags. It should be an easy workaround
to simply put an A tag inside the LI and apply your styles that way.
Maybe other readers can come up with a quick example.
-Adam Ducker
__
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] li:hover for IE6
Sohail Aboobaker wrote:
Hi,
It must a really newbie question but is li:hover doesn't behave correctly in
IE. The following in the stylesheet does not change the background color in
IE where it works fine with firefox.
#secnavul li.hover {
background-color:#B5761C;
text-decoration: none;
}
The color doesn't change in IE. Same style when applied to #secnavul li
a:hover seems to work fine in IE and Firefox.
Is there a workaround?
Also, background images with .png are not supported in IE6. Is this true?
Regards,
Sohail Aboobaker.
__
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/
Sohail:
Forgot the 2nd question. General PNGs work in IE 6, but IE 6 has
problems rendering a PNG with an alpha channel (which is maybe the best
part of PNG though). There are some JavaScript based workarounds that
tend to work okay.
-Adam Ducker
__
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] li:hover for IE6
Hi,
I tried that but it only changes the background for the length of the text
of the a tag. I tried display:block. Am I missing something?
Regards,
Sohail
On Thu, Jul 10, 2008 at 5:23 PM, Adam Ducker [EMAIL PROTECTED] wrote:
Sohail Aboobaker wrote:
Hi,
It must a really newbie question but is li:hover doesn't behave correctly
in
IE. The following in the stylesheet does not change the background color
in
IE where it works fine with firefox.
#secnavul li.hover {
background-color:#B5761C;
text-decoration: none;
}
The color doesn't change in IE. Same style when applied to #secnavul li
a:hover seems to work fine in IE and Firefox.
Is there a workaround?
Also, background images with .png are not supported in IE6. Is this true?
Regards,
Sohail Aboobaker.
__
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/
Sohail:
IE 6 only supports :hover for A tags. It should be an easy workaround to
simply put an A tag inside the LI and apply your styles that way. Maybe
other readers can come up with a quick example.
-Adam Ducker
__
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] Opera sees content and draws a scrollbar, others ok
Rick Lecoat wrote:
...
CSS:
a .onfocustext {position: absolute; left: -px;}
a .onfocustext:focus {position: relative; left: 0;}
...
http://novatest.sharkattack.co.uk/development.php
Did you mean this is typeStyle.css ?
a .extraLinktext {
position: absolute;
left: -999em;
}
a:focus .extraLinktext {
position: relative;
left: 0;
}
Ingo
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opera sees content and draws a scrollbar, others ok
Rick Lecoat wrote: On some of my text links I've included supplemental information that becomes visible only on :focus (the mouse users generally get similarly-worded tooltips instead). An example markup would be: This works fine in browsers including (for a change) IE. Except opera. An example page giving the trouble: http://novatest.sharkattack.co.uk/development.php -- Rick Lecoat Dunno, and did not really look into it. Coping with the obvious first will /sometimes/ yield clues: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fnovatest.sharkattack.co.uk%2Fdevelopment.php PS Trivial pursuits: I would think anyone on a 120 or higher dpi laptop will see little more than a graphic when landing on that page. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] centering navigation tabs in a header section
I'm trying to center navigation tabs, within a header section. Somehow the tabs are still stuck to the left. I'm using the following CSS: width: 600px; margin-left:auto; margin-right:auto; float:left; Any ideas of what i'm doing wrong? Here is a sample page: http://yakmaster.net/test/basic600-300.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] li:hover for IE6
Sohail Aboobaker wrote: Hi, I tried that but it only changes the background for the length of the text of the a tag. I tried display:block. Am I missing something? Hi Sohail, I would guess that you have padding on the LI tag or margining on the A if the whole background of the A isn't matching the whole background of the LI. Another way around this is through the use of an HTC behavior file for IE6. You can see this implemented here: http://theholiergrail.com/tests/cssmenu/index.html That file allows IE6 to emulate the *:hover functionality. Feel free to download the csshover.htc file from the same directory or google whatever:hover to download it directly from the author. Hope it helps. Bill -- /** * Bill Brown * TheHolierGrail.com MacNimble.com * From dot concept...to dot com...since 1999. ***/ __ 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] centering navigation tabs in a header section
Hi Kelly. Remove the float:left Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Kelly Moore To: css-d@lists.css-discuss.org Sent: Thursday, July 10, 2008 11:42 PM Subject: [css-d] centering navigation tabs in a header section I'm trying to center navigation tabs, within a header section. Somehow the tabs are still stuck to the left. I'm using the following CSS: width: 600px; margin-left:auto; margin-right:auto; float:left; Any ideas of what i'm doing wrong? __ 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] centering navigation tabs in a header section
Kelly Moore wrote: I'm trying to center navigation tabs, within a header section. Somehow the tabs are still stuck to the left. I'm using the following CSS: width: 600px; margin-left:auto; margin-right:auto; float:left; Any ideas of what i'm doing wrong? A floated box is shifted to the left, and the used value for margin:auto is 0 in this case. You cannot center a float. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opera sees content and draws a scrollbar, others ok
On 10 Jul 2008, at 23:02, David Laakso wrote: Coping with the obvious first will /sometimes/ yield clues Ack. Typical, the page I use as an example is the one page (I hope/ think) on the site with validation errors. Pesky, slippery closing slashes reinstated and validation fixed, but the problem remains in opera. -- Rick Lecoat www.sharkattack.co.uk __ 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] Opera sees content and draws a scrollbar, others ok
On 10 Jul 2008, at 22:42, Ingo Chao wrote:
http://novatest.sharkattack.co.uk/development.php
Did you mean this is typeStyle.css ?
a .extraLinktext {
position: absolute;
left: -999em;
}
a:focus .extraLinktext {
position: relative;
left: 0;
}
Yes, sorry Ingo. in the original post I gave a simplified example of
the markup/css rather than the somewhat wordier actual code. But you
are correct in your deductions about stylesheet and rules.
--
Rick Lecoat
www.sharkattack.co.uk
__
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] div height problem
I have a sub-section to my navigation tabs which looks fine in FF, but is waaay to tall in IE. any ideas? am I doing something weird with my divs? here is a sample: http://yakmaster.net/test/faq.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Nav Bar Stacked in IE7
This is my first page that I've designed using CSS, so I'm sure I've made a lot of mistakes here. I am using a Mac and primarily used Safari and FF 3.0 to check my work. The page looks okay on my screen, except in Safari it looks like the red border around the left navigation links doesn't go all the way down to encompass the border. Also, I was able to look at the page today in IE7 and the body is not next to the left navigation links like it's supposed to be, the links are stacked on top. What am I doing wrong? http://www.prairiedreamstudio.com/testindex.html http://www.prairiedreamstudio.com/css/layout.css Thanks for the help! Carol __ 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] Nav Bar Stacked in IE7
- Original Message -
From: Carol Huddleston [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Thursday, July 10, 2008 8:09 PM
Subject: [css-d] Nav Bar Stacked in IE7
This is my first page that I've designed using CSS, so I'm sure I've
made a lot of mistakes here. I am using a Mac and primarily used
Safari and FF 3.0 to check my work. The page looks okay on my screen,
except in Safari it looks like the red border around the left
navigation links doesn't go all the way down to encompass the border.
Also, I was able to look at the page today in IE7 and the body is not
next to the left navigation links like it's supposed to be, the links
are stacked on top. What am I doing wrong?
http://www.prairiedreamstudio.com/testindex.html
http://www.prairiedreamstudio.com/css/layout.css
Thanks for the help!
Carol
Carol:
Fix this in your CSS first,
#bodytext{ float: clear;
... should be ...
#bodytext{clear: left;
and fix the color in your footer, I take it you mean color: #CC or
color: #999CCC
You've got a number of validation errors, most likely unrelated to your
issue above.
http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.prairiedreamstudio.com%2Ftestindex.html
Best,
Peter
www.fatpawdesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div height problem
Kelly Moore wrote: I have a sub-section to my navigation tabs which looks fine in FF, but is waaay to tall in IE. any ideas? am I doing something weird with my divs? here is a sample: http://yakmaster.net/test/faq.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Kelly: First of all remove '?xml version=1.0 encoding=UTF-8?' from the top of the code. This is blowing the doctype away in IE 6. Secondly, #banner_container is floating, and #sub is not, so you can either set #sub to float, or say clear: both; to get it to drop down to the bottom edge of #banner_container Third, a similar issue is there because of the floating #banner_container. IE and Firefox differ on how they handle the height of objects with floating objects inside them. A floating object however will expand based on the floating objects inside it in all browsers, so you should experiment with these, or set fixed heights up there in the navigation to get around it. Fourth, it looks like there is heavy whitespace around the !-- end tabs -- and 'div id=sub' section which was causing me some hassle in IE 7. Maybe that will send you in the right direction -Adam Ducker __ 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/
