bmroyer Posted May 14, 2011 Share Posted May 14, 2011 Alright, my design looks good in Chrome, but of course I'm having issues with other browsers, IE and Firefox. There is a 1 px space in the content top, and the 2 sidebar bottoms. It has something to do with my content css, and I've been messing around with it and can't seem to get it right. A live demo can be seen at http://brandonroyer.com/zuppora Link to comment Share on other sites More sharing options...
bmroyer Posted May 14, 2011 Author Share Posted May 14, 2011 Actually I just tried the demo link to make sure it was good, and there is a 1px space at the bottom of the content too in Chrome. So it looks right in no browsers Link to comment Share on other sites More sharing options...
ProblemHelpPlease Posted May 14, 2011 Share Posted May 14, 2011 At least you have a consistent error!!! Are you trying to achieve the black border or not? Looks better with it. Link to comment Share on other sites More sharing options...
bmroyer Posted May 14, 2011 Author Share Posted May 14, 2011 I tried the border around all the divs and it just screwed the layout up even more. So I took all borders off to see if I can get it back to normal, and then was going to try again 1 border at a time lol. If it wasn't for all these different browsers, web design would be so much easier! Link to comment Share on other sites More sharing options...
bmroyer Posted May 15, 2011 Author Share Posted May 15, 2011 anybody? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 16, 2011 Share Posted May 16, 2011 I can only see 1px black background colour showing in blocktwo bottom, and left side edges.There are 2 options1) Add extra 1px padding to bottom of blocktwo and make percentage of column equal 100 percent, and not use 14.95% for side columns.2) Set left and right margins to 0, and use overflow: auto; (1) #blocktwo {background:none repeat scroll 0 0 white;height:100%;margin:29px 15% 0;padding:10px 10px 11px;text-align:left;} (2) #blocktwo {background:none repeat scroll 0 0 white;height:100%;margin:29px 0 0;padding:10px;text-align:left;overflow:auto;} only tested in FF. Link to comment Share on other sites More sharing options...
bmroyer Posted May 18, 2011 Author Share Posted May 18, 2011 It now looks great in Internet Explorer, but block 2 has a 1 px gap at the bottom in FireFox and Chrome. I didn't add the overflow:auto; because it moved block 2 clear down to the bottom of everything, even after I zero'd the margin in block 1 and 3. Link to comment Share on other sites More sharing options...
bmroyer Posted May 18, 2011 Author Share Posted May 18, 2011 woops, double post. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 18, 2011 Share Posted May 18, 2011 even after I zero'd the margin in block 1 and 3.I did not say zero the left right margins of block 1 and 3, all the css relates to black 2 marginsmargin:29px 0 0; first value 'top', second value 'right and left' and third value for 'bottom' Link to comment Share on other sites More sharing options...
bmroyer Posted May 18, 2011 Author Share Posted May 18, 2011 OK thanks, works in IE, FF, and Chrome . Link to comment Share on other sites More sharing options...
krixis02 Posted May 19, 2011 Share Posted May 19, 2011 i would do that:in CSS change #wrapper {margin:0px auto;width:82%;height:100%;bacgraund:#fff; /* add bacgraund color here*/}#blocktwo {/* background: white; delete this */height:100%;text-align:left;padding:10px 10px;margin:29px 15% 0;} P.S.CSS style sheet you dont have organized.start vith wrapperand then with content, that fallows...i always start with: html, body { margin: 0px; padding: 0px;}body { text-align:center; font: 100% 'Helvetica Neue','Helvetica','Arial',sans-serif; color: #1c0400; margin: 25px 10px; background: #FFF url(../background.jpg) no-repeat fixed center bottom;}h1, h2, h3, h4, h5, h6, p, a, address, blockquote, div, ul, li { margin: 0; padding: 0; text-decoration:none;} This deactivates the automatic browser settings to be less bug and set yor page in center even in old IE 5 then i sent divs#wrapper {margin: 0 auto; text-align:left;}#heder{}#leftdiv{}#centerdiv{}#rightdiv{}#footer{}It looks organized and easily found yourself.hope i help you Link to comment Share on other sites More sharing options...
thescientist Posted May 20, 2011 Share Posted May 20, 2011 you might as well just use this *{ margin: 0px; padding: 0px; text-decoration: none; /* whatever other styles you want to 'reset' */} to do a blanket reset of all elements. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.