SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Dec 14, 2006, 17:15 #1
- Join Date
- May 2006
- Location
- York, Uk
- Posts
- 916
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok in Firefox 2.0 not good in IE V6
Hello..
I'm working thru a sitepoint tutorial and have hit a problem.
Here is the page http://www.thestreettheatreadvertisi...m/html_utopia/
My specific problem is regarding the alignment of the three columns. In Firefox there is no problem but in IE V6 the three columns do not align to the top navigation bar titled "Home of the Hack".
Here is the CSSHTML Code:body { margin: 0; padding: 0; background-color: #050845; color: white; background-image: url(img/bg.jpg); background-repeat: repeat-x; font: small Arial, Helvetica, Verdana, sans-serif; } #wrapper { background-color: #fdf8f2; color: black; margin: 30px 40px 30px 40px; padding: 10px; } #header-bottom { border-top: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; height: 1%; } #header-bottom ul { margin: 0; padding: 0; padding: 0 25px 0 0; text-align: right; } #header-bottom li { display: inline; background-color: #fdf8f2; color: #050845; } #header-bottom a:link, #header-bottom a:visited { text-decoration: none; background-color: #fdf8f2; color: #050845; } #tagline { font-weight: bold; background-color: #fdf8f2; color: #050845; font-style: italic; margin: 0px; padding: 0 0 0 15px; width: 200px; float: left; } #ball { position: absolute; top: 110px; right: 55px; } #main { position: relative; top:0; left: 0; width: 100%; margin-top: 10px; } #content { margin: 0 240px 0 150px; border: 1px solid #b9d2e3; background-color: white; color: black; } #mainfeature { background-image: url(img/mainimg.jpg); background-repeat: no-repeat; background-color: #112236; color: white; padding: 2em 2em 1em 200px; height: 1%; } #mainfeature h2 { margin: 0; font-weight: normal; font-size: 140%; } #mainfeature p { font-size: 110%; } #mainfeature p.more { margin-top: 0; text-align: right; } #mainfeature p.more a:link, #mainfeature p.more a:visited { color: white; background-image: url(img/more-bullet.gif); background-repeat: no-repeat; background-position: center left; padding-left: 14px; } #content .inner { margin: 10px 20px 10px 40px; } #content .inner h2 { color: #245185; padding-bottom: 0.2em; border-bottom: 1px solid #b9d2e3; font-size: 110%; } #content .inner ul.features { margin: 0; padding: 0; list-style: none; } #content .inner h3 { font-size: 130%; } #content .inner h3 a:link, #content .inner h3 a:visited { color: #245185; } #content .inner p { color: #666666; font-size: 90%; margin-left: 7%; } #content .inner .features li img { float: left; margin: 0 5px 5px 0; } #content .inner p.author { font-weight: bold; } #content .inner p.more{ margin-top: 0; text-align: right; } #content .inner p.more a:link, #content .inner p.more a:visited { color: black; background-image: url(img/more-bullet.gif); background-repeat: no-repeat; background-position: center left; padding-left: 14px; font-size: 90%; color: #1e4c82; } #sidebar { position: absolute; top: 0; right: 0; width: 220px; background-color: #256290; color: white; margin: 0; padding: 0; } #sidebar h3 { font-size: 110%; background-image: url(file:///C|/Web/table_sitepoint/chapter08/web_site_files/02_creating_the_layout/img/sidebar-header-bg.jpg); background-repeat: no-repeat; margin: 0; padding: 0.2em 0 0.2em 10px; font-weight: normal; } #sidebar .inner { padding: 10px; } #sidebar ul { list-style-image: url(file:///C|/Web/table_sitepoint/chapter08/web_site_files/02_creating_the_layout/img/more-bullet.gif); margin-left: 0; padding-left: 20px; } #sidebar p, #sidebar li { font-size: 90%; line-height: 1.4em; } #sidebar ul a:link, #sidebar ul a:visited { color: white; } #sidebar .date { font-weight: bold; } #searchform .text { width: 196px; border: 1px solid #45bac0; } #searchform .searchbutton { text-align: right; margin-top: 4px; } #searchform .btn { border: 1px solid #45bac0; background-color: #256290; color: white; } #sidebar .motm-image { float: right; margin: 0 30px 0 20px; } #sidebar p.more { clear: right; margin: 0 30px 0 0; text-align: right; } #sidebar p.more a:link, #sidebar p.more a:visited { color: white; background-image: url(file:///C|/Web/table_sitepoint/chapter08/web_site_files/02_creating_the_layout/img/more-bullet.gif); background-repeat: no-repeat; background-position: center left; padding-left: 14px; } #sidebar2 { position: absolute; top: 0; left: 0; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1 px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; } #sidebar2 .inner { margin: 10px; } #sidebar2 a:link, #sidebar2 a:visited { color: #245185; font-weight: bold; } #sidebar2 h3 { color: #245185; padding-bottom: 0.2em; border-bottom: 1px solid #b9d2e3; font size: 110%; }
Any suggestions how i could make the columns line up directly under the Home of the hack bit very welcome...I have had a perfectly wonderful
evening, but this wasn't it-
Julius "GROUCHO" Marx - 1890-1977
http://www.davidclick.com
-
Dec 14, 2006, 18:06 #2
- Join Date
- Jul 2003
- Location
- Kent
- Posts
- 1,921
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
It's broken in FF, IE6 and IE7
do you design on a big screen with a high resolution? cos on my screens, the two columns on the left and right overlap the central column. If you have FF with the web developer plug-in, look at it with outline block elements ticked, in a browser window of about 1000px wide, and you can see the overlap.
Shouldn't the class inner in #content have a width defined or have I missed it somewhere?
Edit
Just noticed you have fixed margins for content to bring it in from the left and right columns. BUT the left and right columns have a width defined as a percentage - they vary. So overlap is inevitable unless my screen matches yours exactly.Dr John
www.kidneydialysis.org.uk
-
Dec 14, 2006, 18:12 #3
- Join Date
- May 2006
- Location
- York, Uk
- Posts
- 916
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I have had a perfectly wonderful
evening, but this wasn't it-
Julius "GROUCHO" Marx - 1890-1977
http://www.davidclick.com
-
Dec 14, 2006, 18:18 #4
- Join Date
- Jun 2005
- Location
- NorCal
- Posts
- 378
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
https://addons.mozilla.org/firefox/60/
If you use the EDIT CSS tool, you can understand CSS really fast. I love this tool!
-
Dec 15, 2006, 02:07 #5
- Join Date
- May 2006
- Location
- York, Uk
- Posts
- 916
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I have had a perfectly wonderful
evening, but this wasn't it-
Julius "GROUCHO" Marx - 1890-1977
http://www.davidclick.com
Bookmarks