Jump to content

Still having issues


bmroyer
 Share

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

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.

Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...