Re: [WSG] Help With CSS
Olajide, we are trying to help, you know... if it's wordpress - you might need to edit your theme templates :-) (and maybe tighten up your CSS) the reason for the different behaviour here relates to the theme templates used by default the index page does have a different template compared to the individual caegory or post page, ie there can be a different structure... have a look at your 'boxes' with the web dev toolbar ad you'll see what I mean... good luck, Prisca On Thu, Jun 5, 2008 at 9:34 PM, Olajide Olaolorun [EMAIL PROTECTED] wrote: Ok, here is the case. http://www.rockondude.net/index.php http://www.rockondude.net/events/ I am trying to get rid of the image padding that happens for some reason only on events page. This does not happen on the index page but for some reason it happens on the events page. I am also trying to get id of the pink background under the images. I like the padding and the background + the padding shift on the text, i just dont want them on images. I cant edit every single image because they are being loaded from Wordpress. Please can anyone help me here??? -- Best Regards, Olajide Olaolorun ### Personal: http://www.olajideolaolorun.com RoD: http://www.rockondude.net Business: http://www.tripleo.biz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- • graphiceyedea.co.uk • eyedea.eu • eyelearn.org • -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] HELP with CSS
Hi Olajide Your page suffers from a common ailment. You are approaching CSS before structural markup. You need to re-build your page with semantic markup and then apply the CSS. Here are some common problems that you have. Multiple h1 elements. The H1 should only appear once and should define the whole page. Flyer Design and Nu' Image... should be h3 elements. Div class=thumbnail is repeated. Divs have no structure and are just a container. This should be an unordered list with each div an li and class=thumbnail applied to the ul Why are you using a block quote when there is no quote inside? p In 2005, me and a couple of the youth took on this project to start a youth magazine for the church. Here is the outcome. Designed by yours truely. /p This is a statement by yourself and you are not referencing an outside source. The blockqoute is an incorrect use. Don't use inline images to replace a simple background color: li img src=images/red.gif alt=Olajide Olaolorun height=40 width=40 /li li img src=images/red.gif alt=Olajide Olaolorun height=40 width=40 /li Be careful with using color:#fff without applying a background color to the container. Look at your site with images disabled, white on white text is not very useful. To repeat, you're not alone. Too many people approach CSS without having a good understanding of structural markup. Your code will be bloated and you will end up with complicated CSS until you understand how to use the structural elements correctly. Ted Drake www.last-child.com -- From: Olajide Olaolorun Sent: Thursday, July 26, 2007 1:18 PM To: WSG Subject: [WSG] HELP with CSS Can someone help me out here: http://www.olajideolaolorun.com/gfx/ There is a problem with where the text start and where the pictures end.. For some reson it loads under the pictres and i have to use the p tag to create spacing for it... can someone help me out. -- Best Regards, Olajide Olaolorun ### Personal: http://www.olajideolaolorun.com Business: http://www.tripleo.biz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] HELP with CSS
Thanks everyone but i fixed it with the clear: left;.. lol...
On 7/26/07, WebMaster [EMAIL PROTECTED] wrote:
Hello Olajide,
Actually yuors is a pretty simple fix.
Lose the blockquotes and p tags and include your text and graphix
inside your div with your thumbnail. Create a class called
.leftimg {
float:left;
} In your style and then call it from yourimage tag class=leftimg
A working example can be seen at http://1fite.com/17.html
I had a similar problem and solved it.
Good luck,
Troy
--
*From:* [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] *On
Behalf Of *Olajide Olaolorun
*Sent:* Thursday, July 26, 2007 1:18 PM
*To:* WSG
*Subject:* [WSG] HELP with CSS
Can someone help me out here:
http://www.olajideolaolorun.com/gfx/
There is a problem with where the text start and where the pictures end..
For some reson it loads under the pictres and i have to use the p tag to
create spacing for it... can someone help me out.
--
Best Regards,
Olajide Olaolorun
###
Personal: http://www.olajideolaolorun.com
Business: http://www.tripleo.biz
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Best Regards,
Olajide Olaolorun
###
Personal: http://www.olajideolaolorun.com
Business: http://www.tripleo.biz
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] HELP with CSS
Hello Olajide,
Actually yuors is a pretty simple fix.
Lose the blockquotes and p tags and include your text and graphix inside
your div with your thumbnail. Create a class called
.leftimg {
float:left;
} In your style and then call it from yourimage tag class=leftimg
A working example can be seen at http://1fite.com/17.html
I had a similar problem and solved it.
Good luck,
Troy
_
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Olajide Olaolorun
Sent: Thursday, July 26, 2007 1:18 PM
To: WSG
Subject: [WSG] HELP with CSS
Can someone help me out here:
http://www.olajideolaolorun.com/gfx/
There is a problem with where the text start and where the pictures end..
For some reson it loads under the pictres and i have to use the p tag to
create spacing for it... can someone help me out.
--
Best Regards,
Olajide Olaolorun
###
Personal: http://www.olajideolaolorun.com
Business: http://www.tripleo.biz http://www.tripleo.biz
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Help with css cascade problem from external style to internal style
The magic of asking for help. 17 seconds after I sent the email, I saw the problem and fixed it. Thanks for just being here. ;) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Help with css cascade problem from external style to internal style
style type=text/css
#every_page #index, #every_page #index:hover { color: #4F; background:
#003173; cursor: default;}
/style
should do it (you're also missing the # from index:hover).
On Thu, 07 Jun 2007 13:40:35 +1000, JS Bracher [EMAIL PROTECTED]
wrote:
#every_page
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Help with css cascade problem from external style to internal style
On Behalf Of JS Bracher
#every_page li a {
display: block;
height: 1em;
padding: .6em;
font-size: small;
text-decoration: none;
color: #999;
background-color: #4F;
}
#every_page li a:hover {
background-color: #999;
color: #000;
}
This works just fine.
So in the internal style sheet, I do this:
style type=text/css
#index, index:hover { color: #4F; background: #003173; cursor:
default;}
/style
The relevant xhtml:
lia id=index href=index.shtml title=Go HomeHome/a/li
I get the cursor change, but not the color change.
When I load the page, the link style for the link to this page is the
same as the others, except that the cursor is changed from a link
pointer to the default pointer. So I know the style is being applied,
it's just not over-riding the style from the external style sheet.
Do I have precedence wrong?
I'd say specificity, try this:
#every_page li #index,
#every_page li #index:hover { color: #4F; background: #003173;
cursor:default;}
---
Regards,
Thierry | www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Help with css cascade problem from external style to internal style
Thanks John.
Once I realized the problem was a specificity issue, I changed the
internal style block to:
li#index a, li#index a:hover ...
Which is not quite what you did, but it's similar.
Yours is better, it's more explicit about what is being styled.
John Faulds wrote:
style type=text/css
#every_page #index, #every_page #index:hover { color: #4F;
background: #003173; cursor: default;}
/style
should do it (you're also missing the # from index:hover).
On Thu, 07 Jun 2007 13:40:35 +1000, JS Bracher [EMAIL PROTECTED]
wrote:
#every_page
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Help with css cascade problem from external style to internal style
On 7 Jun 2007, at 2:25 PM, JS Bracher wrote: Once I realized the problem was a specificity issue, I changed the internal style block to: li#index a, li#index a:hover ... Hopefully you changed the HTML as well, because the sample you originally posted had the id of 'index' on the a, not the li - ? N ___ omnivision. websight. http://www.omnivision.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Help with css cascade problem from external style to internal style
On Behalf Of JS Bracher Once I realized the problem was a specificity issue, I changed the internal style block to: li#index a, li#index a:hover ... Which is not quite what you did, but it's similar. Actually, the above should *not* work as index is not the ID of an LI, but an A --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Help with CSS ul
Thank you very much Steve it really works, you were right it just needed
that i put that line
thanks again
- Original Message -
From: Steve Clason [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Saturday, December 17, 2005 10:45 PM
Subject: Re: [WSG] Help with CSS ul
On 12/17/2005 5:36 PM José Kusunoki Gutiérrez wrote:
I want to know why in IE my side bar is wrong i mean the bullets are not
in
the rigth place, and when i see it in Firefox its ok... is there a css
hack
that i need for IE?
Hi José,
I don't think you need a hack for IE, just to set the line height for
#contentright li. I did this:
#contentright li{
background: url(images/flech.gif) no-repeat left top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
line-height: 1.2; /*!!! new !!!*/
margin: 5px;
padding: 3px 0 2px 13px;
}
And the right section looks OK in IE and Firefox, although the difference
in font size remains.
--
Steve Clason
Web Design and Development
Boulder, Colorado, USA
www.topdogstrategy.com
(303)818-8590
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
__ Información de NOD32, revisión 1.1327 (20051217) __
Este mensaje ha sido analizado con NOD32 antivirus system
http://www.nod32.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Help with CSS ul
Jose - Probably a margin padding issue. Try reducing the padding margin and position the bullets with the xy positioning on the background rule for the li or a:li. I'm not that great with css, you'll probably get some better answers. Have a nice holiday. Matt Hello, Does anyone can help me? I want to know why in IE my side bar is wrong i mean the bullets are not in the rigth place, and when i see it in Firefox its ok... is there a css hack that i need for IE? Thanks for your help. PD: Sorry about the last message that i sent it had the wrong subject accidentally -- José Kusunoki G. Diseñador [EMAIL PROTECTED] www.constantconcept.com (511) 97004563 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Help with CSS ul
José Kusunoki Gutiérrez wrote: I want to know why in IE my side bar is wrong i mean the bullets are not in the rigth place, and when i see it in Firefox its ok... is there a css hack that i need for IE? No-one can possibly offer you any useful advice on how to solve this problem because you haven't provided a link, we can't see the problem for ourselves, we don't know what styles you have applied and thus have no idea what may be causing the issue in IE. It may be a simple case of making sure you set the margin and padding on the ul and li elements, as they do have different default values in different browsers. It could be a double-margin float bug. It could be one of many thousands of IE bugs. Start at position is everything, look through the IE bugs and see if you can find one that resembles your problem. If not, provide much more information about your page. A link to the page is the most useful. http://positioniseverything.net/ PD: Sorry about the last message that i sent it had the wrong subject accidentally It's not a good idea to start a new thread by replying to another message in a completely unrelated thread. Simply changing the subject and deleting the quote (Both of which you initially failed to do.) isn't good enough either, since the message may still contain headers that indicate which thread it's in. Always start a new thread by creating a new message. -- Lachlan Hunt http://lachy.id.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Help with CSS ul
I think that is http://www.constantconcept.com/ On 18/12/05 1:25, Lachlan Hunt [EMAIL PROTECTED] wrote: No-one can possibly offer you any useful advice on how to solve this problem because you haven't provided a link, we can't see the problem for ourselves, we don't know what styles you have applied and thus have no idea what may be causing the issue in IE. -- Atentamente, Jorge Laranjo email [EMAIL PROTECTED] gTalk [EMAIL PROTECTED] msn [EMAIL PROTECTED] aim [EMAIL PROTECTED] skype jorge.laranjo http://www.olhares.com/fueg0/ http://www.flickr.com/photos/fueg0/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Help with CSS ul
Jorge Laranjo wrote: On 18/12/05 1:25, Lachlan Hunt [EMAIL PROTECTED] wrote: No-one can possibly offer you any useful advice on how to solve this problem because you haven't provided a link, we can't see the problem for ourselves, we don't know what styles you have applied and thus have no idea what may be causing the issue in IE. I think that is http://www.constantconcept.com/ My mistake, I didn't look in the sig. Although, it's generally a good idea to explicitly state which site is being talked about in the body of the message anyway. -- Lachlan Hunt http://lachy.id.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Help with CSS ul
Hey Jose, It seems that you are referring to the li elements within the #contentright div? I don¹t have IE in front of me but there is a known whitespace bug to do with IE and list items. There are a range of methods that can be used to fix it including: 1. floating the li 2. setting the a element to display block, moving the background image to this element and then adding display: inline to overcome whitespace issues. 3. using negative margins on the li 4. playing with border-bottom on the li Best to try them all and see which suits your needs. On another note, you seem to have linked to the one css file twice in the head of your document. First link: link rel=stylesheet href=http://constantconcept.com/wp-content/themes/mio/style.css; type=text/css media=screen / Second link: style type=text/css !-- @import url(http://constantconcept.com/wp-content/themes/mio/style.css;); -- /style If the aim is to hide styles from older browsers, the second method may be best, but it would definitely be best to link to the same file only once... Unless I am missing something here :) Finally, everyone stuffs up their first post or two to mail lists. I think I stuffed up my first 20 or so... Don't stress about it! HTH Russ Hello, Does anyone can help me? I want to know why in IE my side bar is wrong i mean the bullets are not in the rigth place, and when i see it in Firefox its ok... is there a css hack that i need for IE? Thanks for your help. PD: Sorry about the last message that i sent it had the wrong subject accidentally ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Help with CSS ul
On 12/17/2005 5:36 PM José Kusunoki Gutiérrez wrote:
I want to know why in IE my side bar is wrong i mean the bullets are not in
the rigth place, and when i see it in Firefox its ok... is there a css hack
that i need for IE?
Hi José,
I don't think you need a hack for IE, just to set the line height for
#contentright li. I did this:
#contentright li{
background: url(images/flech.gif) no-repeat left top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
line-height: 1.2; /*!!! new !!!*/
margin: 5px;
padding: 3px 0 2px 13px;
}
And the right section looks OK in IE and Firefox, although the
difference in font size remains.
--
Steve Clason
Web Design and Development
Boulder, Colorado, USA
www.topdogstrategy.com
(303)818-8590
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Help with CSS ul
José Kusunoki Gutiérrez wrote: Hello, Does anyone can help me? I want to know why in IE my side bar is wrong i mean the bullets are not in the rigth place, and when i see it in Firefox its ok... is there a css hack that i need for IE? Thanks for your help. José, Before you try to fix the issue with CSS, try removing the whitespace between the list items in the markup. IE has a problem with whitespace in there. HTH, Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] help with css round corners.
Hi everyone, I got this cool roundbox code from http://www.redmelon.net/tstme/4corners and am trying to adapt it for use in a more complex wrapper with a masthead, body and footer...But im havin a proble with one of the side drop shadows. check out the page at http://mcmonagle.biz/SHADOW/ Hi Kevin, I found this nifty corners the other day. Never try it though as I am not a Java Script fan. It seems simple though. http://pro.html.it/esempio/nifty/ tee ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] help with css round corners.
Hi Tee, I saw the imageless example to, but it dosn't work in ie5 mac. Even though some people don't develop for this browser anymore i still use it somethimes. Also the roundbox im working on has a drop shadow on either side. thank you -Kevin Hi Kevin, I found this nifty corners the other day. Never try it though as I am not a Java Script fan. It seems simple though. http://pro.html.it/esempio/nifty/ tee ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] help with css round corners.
and am trying to adapt it for use in a more complex wrapper with a masthead I know I'm not answering directly to your problem, but take a look at ALA: Mountaintop Corners http://alistapart.com/articles/mountaintop/ ALA: CSS Design: Creating Custom Corners Borders http://alistapart.com/articles/customcorners/ ALA: CSS Design: Creating Custom Corners Borders Part II http://alistapart.com/articles/customcorners2/ -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] help with CSS
Sounds like double margin bug: http://www.positioniseverything.net/explorer/doubled-margin.html In Firefox, the left nav displays correctly, but in IE, the nav is moved further to the right than it is supposed to be, so I've had to make the image narrower than it should be to fit into the right column. This means that in Firefox, the image doesn't quite reach all the way to the right edge. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] help with CSS
Kym One thing I always do is use a Strict Doctype. I find then that the rendering between browsers is much more consistent that a Transistional Doctype. I also try not to use CSS which will invoke the IE Box Model problem. This involves using 'margin' a lot more than 'padding' where applicable. Hope this helps. Original Message From: [EMAIL PROTECTED] To: [EMAIL PROTECTED] Subject: RE: [WSG] help with CSS Date: Wed, 1 Dec 2004 11:09:46 +1030 Hi, I am a new member to WSG and am hoping someone can help me with a problem I'm having. I'm only new to web design and CSS, and am learning as I go along. I'm trying to create a site but it is displaying differently in Firefox and IE and I'm not sure why. It is a two column template, with the navigation in the left column. There is an image which is supposed to span the entire width of the right column. In Firefox, the left nav displays correctly, but in IE, the nav is moved further to the right than it is supposed to be, so I've had to make the image narrower than it should be to fit into the right column. This means that in Firefox, the image doesn't quite reach all the way to the right edge. The URL is http://learnline.cdu.edu.au/pathways if you need to have a look. I've gone through everything I can think of and still can't fix it. Any suggestions (in layman's terms) would be appreciated. Thank you, Kym Parry Regards, David McDonald Web Designer http://www.davidmcdonald.org ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] help with CSS
On 1 Dec 2004, at 11:39 AM, Kym Parry wrote: Hi, I am a new member to WSG and am hoping someone can help me with a problem I'm having. I'm only new to web design and CSS, and am learning as I go along. I'm trying to create a site but it is displaying differently in Firefox and IE and I'm not sure why. It is a two column template, with the navigation in the left column. There is an image which is supposed to span the entire width of the right column. In Firefox, the left nav displays correctly, but in IE, the nav is moved further to the right than it is supposed to be, so I've had to make the image narrower than it should be to fit into the right column. This means that in Firefox, the image doesn't quite reach all the way to the right edge. The URL is http://learnline.cdu.edu.au/pathways if you need to have a look. I've gone through everything I can think of and still can't fix it. Any suggestions (in layman's terms) would be appreciated. Thank you, Kym Parry Welcome, Kym. You're almost certainly falling foul of IE's incorrect interpretation of the CSS Box Model. Have a look at Big John's site [1] for a rundown on this and other teeth-gnashing inconsistencies you're likely to encounter trying to get your site(s) to render properly in IE. [1] http://www.positioniseverything.net/ie-primer.html HTH, and have fun... Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
