CSS code

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!

 

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.

 

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

 

Show me what you have. A link would be best, of course.

 

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.

 

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.

 

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

 

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.

 

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!

 

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.

 

Most templates. Most.

Unfortunately there's not much more I can say without seeing the code.

 

^ 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.

 

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.

 

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...

 

Omg I can't paste the html in view source of my page it's too long. Tell me what to do please.

 

View Source>Select All>Copy , paste to a text editor. Save to file and attach to a post.

 

Thanks Shallowink. Here's my html:
http://h1.ripway.com/TheGreen/mash.txt
Thanks.

 

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?

 

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 : )

 

Does this one help?
http://www.cssboxmodel.com/

3D version :
http://www.hicksdesign.co.uk/journal/3d-css-box-model

Interactive version is here, its cool.
http://www.redmelon.net/tstme/box_model/