1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS code

Discussion in 'CSS' started by the_green, Mar 1, 2008.

  1. #1
    Can anyone help me with some CSS code? I have a background on my div I wanna set it to the left 70px and at the bottom of the div how can i do it?
    And I want my page to look the same on IE and firefox, is there a code for it? I have yahoo mash page and it looks right when i put CSS code in on firefox but it looks different on IE. Thanks for your help!
    SEMrush
     
    the_green, Mar 1, 2008 IP
    SEMrush
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Show me what you've got so far.

    Set the bottom position to "bottom" then align the image 70px from the left. I forget which order it has to be done in, but I think it's 70px bottom (I could be wrong). Then again, I'm not feeling so good at the moment anyway (I think that annual springtime cold is creeping up on me).

    I can do one better. Same in IE 6, IE 7, Firefox, Opera and Safari. I might even be able to do it without hacking for any of those browsers too, if thep age isn't terribly complex.

    There's half the problem right there. Yahoo isn't known for producing clean, minimal, structurally semantic and valid code. I am. :)
     
    Dan Schulz, Mar 1, 2008 IP
  3. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I tried the code 70px bottom it didn't work. And i don't really understand what you said about page looking the same on IE and firefox, is there a way to do it like putting CSS in or have to hack the browsers:confused:
     
    the_green, Mar 1, 2008 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Show me what you have. :) A link would be best, of course.
     
    Dan Schulz, Mar 1, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Your spring sickness got you there : ) As far as I know, words can't be mixed with numbers/units. left bottom is okay, 70px 100% is okay, but I not 70px bottom.
     
    Stomme poes, Mar 2, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Nevermind, I just saw Paul mention this, and it's okay per CSS2 spec but some browsers don't like the mixture so we shouldn't mix the two but it's apparently very legal. My bad.
     
    Stomme poes, Mar 2, 2008 IP
  7. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I have it on my yahoo mash page, it's not viewable if you don't have a mash account, so I print the pages here, one on firefox and one on IE, the font on IE of that specific module is smaller than on firefox and other sections of the page.
    http://h1.ripway.com/TheGreen/mash-firefox.JPG
    http://h1.ripway.com/TheGreen/mash-IE.JPG
    And the colorful paint and chalks there is the background of that module, I wanna set it to 70px from the left and at the bottom of the module, I don't know how so I set it as 70px 35%, it looks right at the bottom, but when I was at other computer with smaller screen the background was pulled in at the bottom, it lacked a part of the background at the bottom, so I wanna set the code as bottom so it will be at bottom of the module with all screen. Is there a way to do this? Thanks
     
    the_green, Mar 3, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Oh yeah, hiya green. I remember this. I'll bet in your CSS you don't have the universal reset setting everything to 0? I think that's why IE and FF are different. See if you have this at the top of your CSS (if you have multiple CSS sheets, looks for one maybe called "layout.css" or something):

    * {
    margin: 0;
    padding: 0;
    }

    I forget, will this box grow? Will text be added?

    One thing I thought you wanted was the chalk to stick out a bit further than the text inside the box, right? 70px 35% seems to be doing it for you, and if it's a hair off in IE, you could set the 35% to maybe 30%? Or, better yet, keep the 35% and add some bottom padding (to keep the text bottom further away from the bottom of the image). Keep adding padding until even in IE the chalk is there fully.
     
    Stomme poes, Mar 3, 2008 IP
  9. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Oh what is that code it messed up my page lol, it seems to not have any margin and padding between the modules and things and the modules on the right are moved to the bottom of the page.
    And yeah that's what I want my background to be at the bottom of the modules, I'll try it when I'm at a computer with different screen, thanks a lot.
    About the page to look the same on firefox and IE anybody have a idea? Like a code to put in? Thanks a lot!
     
    the_green, Mar 5, 2008 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    There isn't a "code" to make FF and IE look the same. If the HTML and CSS is done properly, and then if any IE6 bugs screw with anything they get fixed, then they should look about the same in both (you'd like all) browsers.

    Unfortunately templates tend to need a lot of hacks because they're templates, with too much extra code and usually need hacks for one browser or another.
     
    Stomme poes, Mar 5, 2008 IP
  11. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Most templates. Most. :(

    Unfortunately there's not much more I can say without seeing the code.
     
    Dan Schulz, Mar 5, 2008 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    ^ I've heard you've made a WordPress template (so presumably it's not craptastic), but really, I've never seen one that didn't have like 5000 classes for each type of comment and 3 paragraphs of conflicting CSS for the same (single) element... I will never ever ever ever use a template ever in my life after what I've seen on this forum > : (

    I agree, Green, you'll have to post the page... I know earlier you didn't have a live page but do you have one now? I dunno what a "module" is so you should post the whole page since something earlier could be affecting something later in the page.
     
    Stomme poes, Mar 5, 2008 IP
  13. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Thanks, this is my code, it's on yahoo mash page and they call the tables or sections there modules, maybe there're some weird tags there but I don't know much too, I just got those codes on a website showing how to customize your mash page by CSS

    #ypf-mydetails {
    background: url("http://i99.photobucket.com/albums/l319/theglassring/chalksandpaint1.jpg") no-repeat;
    background-position: 70px 35%;
    }
    body {
    font-family: Tahoma;
    font-size: 14px;
    color:#339966;
    font-strength: normal
    }
    .mod a {color:#3399CC;}
    .mod a:visited {color:#339999;}
    .mod a:hover {color:#CC9900;}
    #dragLeft .hd, #dragRight .hd {
    color: #CC9966;
    }
    #ypf-blurt .nickname {
    display : none;
    }
    p.themes {text-decoration: underline;}
    ul.theme {list-style-type: disc; padding-left: 20px;}

    I wish i could print you a whole page of my page, but it's not viewable for who not have mash account so I cant print it at a site can print your whole page called thumbalizr, but can you show me some basic ways to do in the CSS for it look the same with all browers cause it has a lot of places look not the same.
     
    the_green, Mar 5, 2008 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Add some html with that, so we can see what the names in the CSS go with. I can guess the first two : ) but the others...
     
    Stomme poes, Mar 5, 2008 IP
  15. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Omg I can't paste the html in view source of my page it's too long. Tell me what to do please.
     
    the_green, Mar 6, 2008 IP
  16. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #16
    View Source>Select All>Copy , paste to a text editor. Save to file and attach to a post.
     
    shallowink, Mar 6, 2008 IP
  17. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    the_green, Mar 6, 2008 IP
  18. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Oh btw what's the code for bottom padding again, i tried add bottom-padding: 1px it didn't make any difference, and when i removed the vertical position 35% because i thought it controled the vertical position of the background the background jumps up to the center of the div, not padding from the bottom 1px like I set. So what should I do with this?
     
    the_green, Mar 6, 2008 IP
  19. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #19
    It probably jumped up because when there's only one number or unit, the other by spec is supposed to be "center" (tho IE has issues with this)...

    Padding is something that extends the height or width of your box (div), while not letting the content inside also expand (in effect, making a space between the last of the text and the bottom, if we mean bottom padding). The point of bottom padding isn't to move the image, but to make a gap between that bottom and the last of the text.

    Hmmm I think I might have to make a little page about this, cause I'm having trouble getting this across. I need to make some images : )
     
    Stomme poes, Mar 6, 2008 IP
    Halobitt likes this.
  20. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #20
    shallowink, Mar 6, 2008 IP