- This topic is empty.
-
AuthorPosts
-
December 10, 2009 at 10:30 am #27151csanders984Member
I’m a slight newbie to CSS. I recently completed an intermediate course and with the help of a floating tutorial I was able to get my design to line up the same way as my mock up. ( Horizontal 3 image based navbar) …
The design lines up perfectly with proper spacing when viewed in Safari but when i test it out in Firefox the middle image pushes really close to the image on the right side. It’s not touching, but it’s really close. I mean there’s still space between the images and i can almost ignore it, but the Safari version looks 100% better and exactly like my mock up.
What could it be that makes the design look like this : ____ ____ ____ in safari but like this: ____ ____ ____ in fire fox.
I can’t get it online right now so that’s the best example I can provide. Sorry.
This is my mock up: http://twitpic.com/isf0a this is also how the design appears in Safari… the difference is that space ship is pushing over in the negative space to the right and a lot closer to the cartoon character head.
December 10, 2009 at 10:37 am #67961JaredAMMemberCan you post some css/html code?
Do you have any margins or padding around your images?
December 10, 2009 at 11:21 am #67962csanders984MemberSure, but I’ll have to wait until I get home. i’m at work right now….
December 10, 2009 at 7:26 pm #67977csanders984MemberBelow is my CSS for the entire page
Code:/* Universal style rule */
*{
/* Block all browser default margins and padding */
margin:0;
padding:0;
/* Temporary borders */
order:dashed 1px #f00;
}#wrapper{
width: 55em;
background-color: #FFFFFF;;
/* Center the wrapper */
margin: 0px auto 0 auto;}
#branding{
background-color: #FFFFFF;}
#branding img{
background-color: #FFFFFF;
width: 90% ;
float:}
body{
background: ;
font-family:Arial, Helvetica, sans-serif;}
/************* MAIN division styles ****************/
#col1, #col2, #col3{
float: left;
width: 190px;
margin-right: 4.5em;
position: relative;
padding: 1.5px;}
#col1{
padding-left: 2.0em;
}#col2{
padding-right:0.5em;
margin-left: 0 em;
}#col3{
margin-right: 0em;
float: right;
position: relative;
padding-top: 2.5em;
padding-left:0.5em;
}#navigation{
position: relative;
width: 100%;
margin: auto;
float:left;
padding-bottom:4.0em;
}#lum1, #lum2{
float: left;
margin: 0 2.3em 0 2.3em;
}#lum2{
padding-left: 0.42em;}
#lum3{
float: right;
margin: 0 2.3em 0 2.3em;
padding-bottom: 0.5em;
}#footer{
color: #FFFFFF;
background-color:#000000;
border-top:thin dashed;
margin-top: 3em;
background-color:;
text-align: center;
clear: both;
font-size: 9.5px;}
and my html for the body section
December 11, 2009 at 9:59 am #68005csanders984MemberInterestingly, I played with the code and fixed the problem, But now the spacing is way too big in Safari and it looks normal in Firefox. WTH ?
All I did was change my wrappers width, to 45em, that way the float would be able to breathe more.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.