Jump to content

Still having issues


bmroyer

Recommended Posts

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

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

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

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

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

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...