Re: [css-d] Lines clipping in Explorer, and width issue [SOLVED]
Gunlaug,
Thank you for following up with more information.
Try this modification:
#main-menu li {
width: 34%;
margin-left: -1%;
position: relative;
left: 1%;
}
That's some tricky CSS there. It looks good in FireFox, IE on Windows
handles it pretty well too. Safari leaves a little extra space on the
far right side, but as you suggest, that can be made acceptably
unnoticable with a background colour on the ul tag.
Thank you so much for the extra effort in helping me out!
--
Dave M G
Articlass - open source CMS
http://articlass.org
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Multiple Backgrounds in CSS2
I have a tiling fixed background to the body of my site. A content container sits on top of this background. At the bottom of the page I want to put a fixed image that sits below the container and as the container is scrolled this image reveals itself. To get a sense of what I'm talking about take a look at http://life.outtacontext.com. As you scroll the content up, you see the flowers at the bottom, underneath the content area. To see what I want to do on a similarly designed site, take a look at http://inourpath.com/intro.html. At the bottom of the page is an image of a car. I did this mockup quickly to see how it would look, just putting a div at the bottom of the page. But it scrolls with up with the content. I want it to be anchored to the bottom of the page and revealed as you scroll up. The difference with the former site I mentioned is that it was easy to anchor the flowers at the bottom. A simple body background image fixed to the bottom (I used a background color for the rest of the background). However, in my new site I already use a background image. I know that CSS3 might make this easier to accomplish. But until then, can any of you think of a way to do this? Jeff __ 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] Multiple Backgrounds in CSS2
Jeff Gates wrote:
http://inourpath.com/intro.html. At the bottom of the page is an
image of a car. I did this mockup quickly to see how it would look,
just putting a div at the bottom of the page. But it scrolls with up
with the content. I want it to be anchored to the bottom of the page
and revealed as you scroll up.
Start by cleaning up the markup. Get rid of all those br / you have in
there, and name the ID correctly:
div id=footer
p class=noindent
All contents of bIn Our Path/b are copy;1983-2008 Jeff Gates
/p
/div
/div
div id=car!-- --/div
/body
The following CSS (2/2.1):
body {margin: 0;}
#car {height: 250px; background: transparent
url(http://inourpath.com/images/car.gif) no-repeat center bottom fixed;}
...will then do the rest in all browsers above IE6.
If you really, really, also need a workaround for IE6, it is always
possible to hack/stack in a foreground as background as described,
with demo, on this page...
http://www.gunlaug.no/contents/wd_additions_15.html
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] problems with background image, borders
Hello there, I'm making a website and I have two big problems with cross compatibility, haven't tested on IE7, site developed for FF, so in FF everything looks as it should. Made and tested on Ubuntu 7.10. 1. background image looks fine on FF but looks totally wrong on Opera 9.5and IE6, don't know what's wrong 2. border around navigation dissapears, and it doesn't pick up background color, as it does on Opera and FF. address: http://sunlust.net/test4 css: http://sunlust.net/test4/css/master.css If you notice any other weird behaviors, please let me know, I'm not getting paid for this project but I want to get it right since it's for a close friend. Much appreciated, Regards -- Krystian - Sunlust Sunlust Designs http://sunlust.net __ 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] problems with background image, borders
As a point for you, it looks find in IE6 and IE7 Andrew Krystian - Sunlust wrote: Hello there, I'm making a website and I have two big problems with cross compatibility, haven't tested on IE7, site developed for FF, so in FF everything looks as it should. Made and tested on Ubuntu 7.10. 1. background image looks fine on FF but looks totally wrong on Opera 9.5and IE6, don't know what's wrong 2. border around navigation dissapears, and it doesn't pick up background color, as it does on Opera and FF. address: http://sunlust.net/test4 css: http://sunlust.net/test4/css/master.css If you notice any other weird behaviors, please let me know, I'm not getting paid for this project but I want to get it right since it's for a close friend. Much appreciated, Regards __ 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] Multiple Backgrounds in CSS2
Georg, thank you very much.
http://inourpath.com/intro.html. At the bottom of the page is an
image of a car. I did this mockup quickly to see how it would look,
just putting a div at the bottom of the page. But it scrolls with up
with the content. I want it to be anchored to the bottom of the page
and revealed as you scroll up.
Start by cleaning up the markup. Get rid of all those br / you have in
there, and name the ID correctly:
div id=footer
p class=noindent
All contents of bIn Our Path/b are copy;1983-2008 Jeff Gates
/p
/div
/div
div id=car!-- --/div
/body
The following CSS (2/2.1):
body {margin: 0;}
#car {height: 250px; background: transparent
url(http://inourpath.com/images/car.gif) no-repeat center bottom fixed;}
...will then do the rest in all browsers above IE6.
If you really, really, also need a workaround for IE6, it is always
possible to hack/stack in a foreground as background as described,
with demo, on this page...
http://www.gunlaug.no/contents/wd_additions_15.html
regards
Georg
--
__
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] hide and show an image in IE?
On Fri, 14 Mar 2008 17:08:45 -0400, Copeland wrote:
Speaking of Eric Meyer… I'm following his tutorial on how to create css
disjoint
rollovers for images. In IE the images remain hidden. Is there now a
workaround for
that so that as you mouse over your menu items, therefore revealing the
image, IE will
show it too?
This is where it screws up in IE…
#top a img {height: 0; width: 0; border-width: 0; position: relative;}
[...]
HYPERLINK http://www.greenmodernkits.com;
I'm confused. I see no such rule in either stylesheet, nor an ID of top
even in the generated source.
Is this the correct page?
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] X-UA-Compatible vs. Conditional Comments
Ingo Chao wrote: I don't know if it has been reported before. Both files just differ in the X-UA and the headline, see below http://www.satzansatz.de/ie8/xua8.html shows the generated content and the Conditional Comment for IE8 Correct http://www.satzansatz.de/ie8/xua7.html does not show the generated content, but the Conditional Comment for _IE8_ Is this expected? Even if the X-UA-Compatible is set to IE=7, the conditional comment acts as if this is IE8? This is correct if you have previously toggled. To show the IE 7 version vector do the following. 1. Select the [7] Toggle IE7 Emulation Mode button (the button will now have a white background). 2. Close IE8. 3. Open IE8 and load this page. http://www.satzansatz.de/ie8/xua7.html You will only see. IE 7 version vector Toggling into IE8 standard mode you will see. IE 8 rendering and IE 7 version vector To show the IE 8 version vector do the following. 1. Select the [7] Toggle IE7 Emulation Mode button (the button will have no white background). 2. Close IE8. 3. Open IE8 and load this page. http://www.satzansatz.de/ie8/xua7.html You will only see. IE 8 version vector Toggling into IE8 standard mode you will see. IE 8 rendering and IE 8 version vector So it critical in how you toggle between modes, either by the [7] button or using the developers tools to switch modes. The former seems the best approach. I didn't see this on the IE blog. :-) Alan http://css-class.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] Confused noob! div is different IE or FF
Hi,
I'm working on a site http://www.returnengagement.org
CSS is below
It renders completely different in IE (looks how I want it
basically) versus Firefox Looks all jumbled up!
I think it is because of a DIV, but depending on whether or not
the DIV on line 66 is there, it renders wrong in the other browser.
Am I missing something? Much thanks for any help! I've spent so
many hours trying to figure this out and am completely at a loss.
--
Laura mailto:[EMAIL PROTECTED]
=css below=== this is the re_style.css
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
background: #809315 url(images/img01.jpg) repeat-x top left;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FF;
margin: 0px;
padding: 0px;
}
input, textarea {
width: 220px;
background: #FF url(images/img04.gif) repeat-x;
border-top: 1px solid #A3A3A3;
border-right: 1px solid #E5E5E5;
border-bottom: 1px solid #FF;
border-left: 1px solid #D6D6D6;
font: normal 1em/normal Trebuchet MS, Arial, Helvetica, sans-serif;
color: #6E6E6E;
}
h1, h2, h3 {
}
h1, h1 a, h2, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
text-decoration: underline;
}
h1 {
font-size: 38px;
}
h2 {
font-size: 28px;
font-weight: normal;
}
h3 {
font-size: 16px;
}
p, ul, ol {
margin-top: 1.5em;
#this was 190% before but made the space between lines very large
line-height: 130%;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
color: #FF;
}
a:hover {
text-decoration: none;
color: #FF;
}
a img {
border: none;
}
img.left {
float: left;
#was 20px
margin-right: 20px;
}
img.right {
float: right;
margin-right: 20px;
}
hr {
display: none;
}
#header {
width: 960px;
height: 206px;
margin: 0 auto;
background: url(images/img02.jpg) no-repeat top left;
}
/* Logo */
#logo {
width: 870px;
height: 152px;
margin: 0 auto;
}
#logo h1, #logo h2 {
margin: 0;
}
#logo h1 {
float: left;
padding-top: 75px;
padding-left: 50px;
font-weight: normal;
text-transform: lowercase;
}
#logo h2 {
float: left;
padding-top: 95px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
}
#logo h2, #logo h2 a {
color: #FF;
}
#logo a {
text-decoration: none;
}
/* Menu */
#menu {
width: 960px;
margin: 0 auto;
padding-bottom: 30px;
}
#menu ul {
margin: 0;
padding: 23px 0 0 28px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
padding: 0 2px 0 2px;
}
#menu li.first a{
float: left;
background: #619E00;
padding: 9px 20px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
color: #FF;
}
#menu a {
float: left;
background: #406800;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
color: #FF;
}
#menu a:hover {
text-decoration: none;
background: #619E00;
padding: 9px 20px;
}
/* Search */
#search {
float: right;
width: 200px;
}
#search form {
margin: 0;
padding: 0;
margin-top: -10px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search input {
}
#search #s {
width: 150px;
}
#search #x {
margin: 0;
padding: 0;
width: 30px;
background: #406800;
color: #FF;
}
/* Banner */
#banner {
width: 960px;
margin: 0 auto;
padding: 8px 0;
}
/* Page */
#page {
width: 900px;
margin: 0 auto;
padding: 45px 35px 0 25px;
}
/* Content */
#content {
float: right;
width: 603px;
}
.post {
}
.post .title {
margin: 0;
padding: 20px 20px 0 20px;
background: url(images/img04.gif) no-repeat left 100%;
border-bottom: 1px solid #FF;
}
.post .title a:hover {
text-decoration: none;
}
.post .entry {
padding: 0 20px;
}
.post .meta {
height: 25px;
margin: 15px 0 20px 0;
padding: 10px 0 0 20px;
background: #4E9FC8 url(images/img07.gif) no-repeat;
line-height: normal;
}
/* Sidebar */
#sidebar {
Re: [css-d] Confused noob! div is different IE or FF
On Sat, 2008-03-15 at 16:20 -0700, Laura wrote: Hi, I'm working on a site http://www.returnengagement.org Am I missing something? Much thanks for any help! I've spent so many hours trying to figure this out and am completely at a loss. The validator shows 136 errors. The first one is a missing closing /a on line 16. It might be as simple as fixing that. George __ 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] noob problem resolved and follow up question re: xhtml validation
Hi, thanks to everyone for your help. Turns out I was nailed by a really LAME error, I validated the CSS but forgot to validate the xhtml. And therein laid my problem. It has been corrected... and so have I! One further question though regarding validation I have a google maps link on the page which is throwing all kinds of errors and also, I use unordered list ul li with p below the listed item (for other info). The validator says this is not allowed. If that is true, how do you put a paragraph under a li Thanks for all your help. I'll try not to make such a silly error in the future. I really appreciate your feedback! -- Laura mailto:[EMAIL PROTECTED] -- __ 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] noob problem resolved and follow up question re: xhtml validation
Laura wrote: One further question though regarding validation I have a google maps link on the page which is throwing all kinds of errors and also, I use unordered list ul li with p below the listed item (for other info). The validator says this is not allowed. If that is true, how do you put a paragraph under a li Tidy Online http://infohound.net/tidy/ is a tool for checking and cleaning up HTML source files. It will point out the errors. And shoot you to a corrected and valid document. /Always/ back-up the document before using Tidy. -- 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] [Fwd: Re: Confused noob! div is different IE or FF]
Sorry. Forgot that TBird needs Reply to All. Peter __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] X-UA-Compatible vs. Conditional Comments
Alex Robinson wrote: Gunlaug Sørtun wrote: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Can anyone please confirm that the real IE7 will show blue, blue, green, green and red on all test pages? http://css-class.com/test/ie8hack-valid.htm Confirming. Those colors are what the real IE7 shows. /aol Me too! Thank you both Georg and Alex for confirming the real IE7 behavior. Anyhow I have a lot of the real IE7 behavior imprinted to memory (in respect with my test cases and some on Bruno's test cases). I have seen or documented enough real IE7 behavior to last a life time. It's good that I caught and tested this browser early. :-) This whole X-UA-Compatible business really had me hoodwinked. Now that I'm on the right track now I can begin to test properly. :-) I using a control since the control should always show the same as the X-UA-Compatible version test depending on if your in IE8 standard mode or IE7 mode (test 3 and 4 shows otherwise). Now the new tests. 1. Close IE8 and open again in standard mode. Test IE8 mode http://css-class.com/test/ie8-XUA-control.htm Control and XUA-IE=8: Generated Content and Conditional Comments for IE8. Red, Orange and Blue. XUA-IE=7: Conditional Comments for IE8. Blue, Green and Red. 2. Selecting the IE7 mode by the IE7 emulation button (close and open IE8). Test IE7 mode http://css-class.com/test/ie8-XUA-control.htm Control and XUA-IE=7: Conditional Comments for IE7. Blue, Green and Red. XUA-IE=8: Generated Content and Conditional Comments for IE7. Red, Orange and Blue. 3. Selecting IE7 mode with the developers tool switch (reload IE8 in standard mode first by the undoing the IE7 emulation button). Test IE7 mode http://css-class.com/test/ie8-XUA-control.htm All test: Conditional Comments for IE8. Blue, Green and Red. 4. Selecting IE8 mode with the developers tool switch. Test IE8 mode http://css-class.com/test/ie8-XUA-control.htm All test: Generated Content and Conditional Comments for IE8. Red, Orange and Blue. Test 1 and 2 confirms the same results as Ingo Chao's test cases [1] [2] [3] and method for testing. Test 3 and 4 shows the mess if selecting a mode using the developer's tool switch. All testing would suggest that what is seen on the IE blog about toggling [4] is not currently working as it should. Any thoughts? Alex, have you found that link about the vector thing being broken? [1] http://archivist.incutio.com/viewlist/css-discuss/97485 [2] http://www.satzansatz.de/ie8/xua8.html [3] http://www.satzansatz.de/ie8/xua7.html [4] http://blogs.msdn.com/ie/archive/2008/03/09/using-the-emulate-ie7-button.aspx Alan http://css-class.com/test/bugs/ie/ie-bugs.htm __ 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/
