vertical alignment problem in IE 7
Last Post 06/15/2009 6:58 AM by Lee Sykes. 5 Replies.
Author Messages
Rob Roberts
Nuke Newbie
Nuke Newbie
Posts:8


--
06/03/2009 12:37 PM  

I have a new skin setup which works fine in my localhost, but now is off kilter in IE 7 only.
http://www.funcnology.com

In FireFox, everything lines up correctly (though if anyone can tell me how to reduce the size of the contentpane to keep the footer above the "fold" I would appreciate it).

In IE 7, the Register and Login items (which are classed as .skingradient) to not valign: middle as the separator does. The same holds true for the Breadcrumbs and I believe the CurrentDate items (the Breadcrumb issue only shows up when going to a sub-page, as the separator for breadcrumbs »t does not show up lined up (it is actually aligning middle as it should).

Any suggestions?  No, I'm not using an iehacks.css and I also renamed the default.css and portal.css because they were initially causing such a mess.

Any suggestions appreciated (I'm going live with the blog without the fix, however--I'll just use some cosmetic coverup to appease IE).

Rob Roberts

Leviathan Consulting

Lee Sykes
DNN Creative Staff
Nuke Master VI
Nuke Master VI
Posts:4945


--
06/08/2009 3:54 AM  
hello,

Have you solved the problem as it seems to line up okay in IE7.

Looking at the content pane height, you need to look at this class:


.skinmaster {

its the height: 100%; that is causing the gap, if you take out this line you will see the footer move up the page.

You may want to checkout:
Troubleshooting DotNetNuke Skins

On another note, I noticed using the web developer toolbar that the skin.CSS file is loading twice. This is caused by this line of code in your skin.html file:

< link href="/Portals/_default/Skins/funcnology-skin/skin.css" rel="stylesheet" type="text/css" / >

You do not need to add a link to the skin.CSS file in your skin.html file as DotNetNuke will automatically call in that CSS file, having a line of code in your skin.html file can actually cause you problems.

Thanks,
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/DNNCreative

Lee Sykes's Facebook Profile
Rob Roberts
Nuke Newbie
Nuke Newbie
Posts:8


--
06/11/2009 5:29 PM  
I haven't solved the problem. I just made the line smaller so it is more difficult to see the offset. I'll remove the 100% and have already removed the second reference to the CSS file.

Now if you look at the blog entries, they are centered and not left-aligned. I think it is related to security somehow, as the same skin is used for admin, but everything looks correct when viewing the entries logged on as host or admin.

Any clues?
Lee Sykes
DNN Creative Staff
Nuke Master VI
Nuke Master VI
Posts:4945


--
06/14/2009 3:57 AM  
Hello,

I used the web developers toolbar to view all of the CSS files + deleted all of their content.

The text is still centered.

Looking at the HTML code, it's caused by this:

< td id="dnn_ContentPane" class="contentpane" valign="top" align="center" rowspan="2" height="400" width="650" >

So you need to look for the CONTENTPANE table cell and remove align="center"

Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/DNNCreative

Lee Sykes's Facebook Profile
Rob Roberts
Nuke Newbie
Nuke Newbie
Posts:8


--
06/14/2009 10:08 PM  
Thanks, Lee.
This stuff is very annoying when it works on localhost and I pull the exact same files over to the hosted environment.
If anyone ever figures out the vertical alignment issue, I would appreciate the assistance there. Valign settings just don't seem to work to solve the problem.
Lee Sykes
DNN Creative Staff
Nuke Master VI
Nuke Master VI
Posts:4945


--
06/15/2009 6:58 AM  
when you add a module to the page, you also have the option to set the modules alignment, I would double check this option as well. Thanks,
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/DNNCreative

Lee Sykes's Facebook Profile


---