Buy now for ...
Search our site
How it works
General help
|
| Author |
 Topic  |
|
coastalem
Advanced Member
USA
321 Posts |
 Posted - 09/07/2012 : 22:16
|
Anyone know why many times my content will push under the left (or right) side bars. In some browsers it will stay in the center main content area and do a scroll bar, but in others it will just go under the side bars and leave a BIG empty area in the main panel. HELP:-) Ideas...
It has happened on a number of things but this is just an example:
Here is an image to illustrate what I am referring to (extra spaces for non-crawl_
http: // www.coastalem .com /ECT/scroll-Q.htm
ECT CSS liquid templace .asp 6.2.1 |
Edited by - coastalem on 09/07/2012 22:35 |
|
Sinbad
Administrator
USA
53966 Posts |
Posted - 09/08/2012 : 08:53
|
Hi we need to see the actual page to see what the style sheet has. Also can you let us know which browser your using when it occurs.
Winners never quit, quitters never win
User Manual for Ecommerce Templates
|
 |
|
coastalem
Advanced Member
USA
321 Posts |
Posted - 09/08/2012 : 10:26
|
Hi, go to (I added extra spaces for non-crawl)
http: // 184.173.104.168 /default.asp
Since this is a liquid template, you will need to move your right side browser window to the left until it jumps from the center to UNDER the left bar instead of staying in the center correctly and giving a scroll bar on the bottom of the browser/s. I had the right bar on the home page showing too, but it would jump under the right bar which had content not as long as the left bar. But then when that was gone it went to under the left bar.
It happens to me in IE, Chrome, FF, the one I have on my Win 7 computer and ditto for IE and FF on XP. Can't tell you what ver except for IE is 6 on one (I know, don't judge and I won't go into why = legacy program issues) and IE 7 on the other. Chrome should be pretty update and FF is newer on one computer and around ver 5? on the other...
As mentioned, it is not just the area under the payment methods on this page (which is the .asp dynamic feature products plug-in which has a table) but also other tables I have had in the maincontent area (on this page and/or on other pages. But this example shows the issue for all the other instances I have. And table seems to be the common denominator.
It there some sort of css, or float issue I need to set up in the stylecss file. I am a little clueless about this...
Help... Please... Thank you!
Side Q. While you look at the default page any idea why when I hid the right side bar the center text box verbiage/content goes right up to the left bar with no padding or such. Is there something in the css file I can change to have more padding in the center panel so it does not butt right up against the left side bar?
|
Edited by - coastalem on 09/08/2012 10:39 |
|
|
Sinbad
Administrator
USA
53966 Posts |
Posted - 09/08/2012 : 11:50
|
Hi I think because you are manually resizing the browser that is why you see the change, however viewing the page using different screen resolutions the main content remains within the center. There are several online screen resolution simulators that you can do use to get a idea of how the site appears using different resolutions.
Winners never quit, quitters never win
User Manual for Ecommerce Templates
|
|
|
coastalem
Advanced Member
USA
321 Posts |
Posted - 09/08/2012 : 13:19
|
| Never mind... still working on figuring things out... |
Edited by - coastalem on 09/09/2012 02:28 |
|
|
coastalem
Advanced Member
USA
321 Posts |
Posted - 09/08/2012 : 16:23
|
| Never mind... still working on figuring things out... |
Edited by - coastalem on 09/09/2012 02:27 |
|
|
coastalem
Advanced Member
USA
321 Posts |
Posted - 10/01/2012 : 21:14
|
I AM BACK... Please someone...
OK, I will try to keep it simple and hope that someone with css knowledge will know the answer:-)
I have the CSS Virtual Shadow Template:
Liquid layout, stretches with screen resolution because I want the 100% layout where the content moves/scrolls out or in when the browser window is sized from the left or right... Having said that...
Two issues I am trying to solve:
A) In some browsers, mostly IE but I think I have seen it in others, but for sure in IE 9 and IE 6 which I have on my computer/s in addition to others.
When I resize my window as mentioned above the main content jumps down the page to after where the left nav menu ends
B) I have the dynamic Featured products add-on on the default.asp page only and that content will jump to under the right nav in ALL browsers I have tried...
I think it is some sort of css setting, or is there a setting that I can put in there that will keep the main content panel from jumping down the page. I don't know enough about css to figure out what to do.
Here is a reference picture page:
http://www(dot)coastalem(dot)com/ect/scroll-Q.htm
Here is the web site pages shown in the picture link:
http://184(dot)173.104(dot)168/default.asp
http://184(dot)173.104(dot)168/orderstatus.asp
Here is my style.css file:
/* STORE TABLE BACKGROUNDS
-------------------------------------*/
table.cobtbl{
background-color: #DAE2F3;
}
td.cobhl{
background-color: #F4F6FB;
color:#000
}
td.cobll{
background-color: #FFF;
color : #333;
padding:5px;
}
/* PRICE NAME and DISCOUNTS DISPLAY
-------------------------------------*/
.prodprice, .detailprice, .prodname, .detailname {
color: #60596A;
font-size: 12px;
font-weight : bold;
}
.discountsapply{
color: #84210F;
font-size: 12px;
font-weight : bold;
}
.proddiscounts, .detaildiscounts, .catdiscounts{
color: #84210F;
font-size: 11px;
font-weight : normal;
}
/* PRODUCT REVIEWS
-------------------------------------*/
.numreviews{
color: #333;
font-size: 13px;
font-weight : bold;
background-color:#ccc;
border-bottom:1px solid #000;
padding:4px;
}
.reviewheader{
color: #333;
font-size: 12px;
font-weight : bold;
}
.reviewcomments{
color: #333;
font-size: 12px;
font-weight : normal;
line-height:1.6;
}
.reviewname{
color: #666;
font-size: 12px;
font-weight : normal;
line-height:1.6;
}
/* DESCRIPTION FIELDS
-------------------------------------*/
.detaildescription, .proddescription{
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-size: 12px;
line-height:1.6;
}
/* CSS Document */
BODY {
margin:0px;
padding:0px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: #000;
background: #FFF;
}
/* Link properties */
A:link {
color: #2626BF;
text-decoration: underline;
}
A:visited {
color: #2626BF;
text-decoration: none;
}
A:active {
color: #2626BF;
text-decoration: none;
}
A:hover {
color: #2626BF;
text-decoration: underline;
}
/* Main text headings */
h1
{font-family: tahoma, Arial, Helvetica, sans-serif;
font-size:11px;
color:#756BFF;
text-decoration:none;
font-weight:bold;
margin:3px 5px 5px 3px;}
h2
{font-family: tahoma, Arial, Helvetica, sans-serif;font-size:12px;
color:#9FB5FF;
text-decoration:none;
font-weight:bold;
margin:0px 5px 5px 3px;
padding:5px 0px 0px 5px;}
h3
{font-family: tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
color:#026ED3;
text-decoration:none;
font-weight:bold;
margin:5px 5px 5px 3px;
text-align:right;
}
/* Footer text */
.footertext {
font-family: tahoma, Arial, Helvetica, sans-serif;
margin:0px;padding:15px 0px 5px 0px;
font-size:10px;
color:#666;
}
/* Titles */
.t1 {
font-family: tahoma, Arial, Helvetica, sans-serif;
font-size:14px;
color:#336699;
text-decoration:none;
font-weight:bold;
}
.t2 {
font-family: tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #336699;
text-decoration: none;
font-weight: bold;
}
/* Main body */
.maincontent {
border-top-style:dotted;
border-top-width:1px;
border-top-color:#fff;
margin:3px 10px 30px 0px;
padding:0px 10px 5px 10px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color:#333;
}
.maincontent2 {
border-top-style:dotted;
border-top-width:1px;
border-top-color:#989898;
margin:3px 220px 0px 0px;
padding:0px 10px 5px 10px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color:#333;
width:60%;
}
.maincontent2 img {float:right;margin:5px 0px 5px 5px;}
.lwrap {
width:170px;
margin-top:5px;
margin-bottom:0px;
margin-right:auto;
margin-left:auto;
padding:0px;
}
/* Left content */
.lcontent {
border-left-style:solid;
border-left-color:#F4F6FB;
border-left-width:5px;
border-right-width:15px;
width:160px;
margin:0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;font-size:11px;
color:#666666;
text-decoration:none;
text-align:left;
font-weight:normal;
padding:5px 3px 5px 5px;
background-color: #EEE;
}
.leftshadow {
width:17px;
height:4px;
padding:0px;
margin-top:0px;
}
.leftshadow img {padding:0px;margin:0px;float:right;}
.separator {
border-top-width:1px;
border-top-style:dotted;
border-top-color:#989898;
margin-right:15px;
margin-left:5px;
margin-top:4px;
}
/* News boxes */
.newsheader{
background-image:url(images/left_subh.gif);
background-position:top;
background-repeat:no-repeat;
width:182px;
margin-left:auto; margin-right:auto; margin-top:5px;margin-bottom:0px;
height:17px;
text-align:right;
padding:1px 5px 0px 0px;
font-family: tahoma, Arial, Helvetica, sans-serif;font-size:10px;
color:#FFF;
font-weight:bold;
}
.newscell{
background-color:#EEE;
width:182px;
margin-left:auto; margin-right:auto; margin-top:-1px;margin-bottom:0px;
min-height:30px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
color:#666;
}
.newscell p {padding:5px 5px 15px 10px;margin-top:0px;}
/* Right content */
.rcontent {
border-left: 2px solid #CACFE4;
background-color:#EEE;
width:168px;
margin-left:auto;
margin-right:auto;
min-height:30px;
margin-top:8px; margin-bottom:0px;
font-family: tahoma, Arial, Helvetica, sans-serif;
font-size:10px;
font-color:#E8F4F0;
padding:5px 3px 10px 5px;
text-align: left;
}
.rightshadow {
text-align:right;
width:168px;
height:7px;
padding:0px;
margin-top:0px;
margin-bottom:5px;
float:right;
}
.rightshadow img {padding:0px;margin:0px;float:right;}
/* Bullet list */
ul {
list-style-image:url(images/bullet.gif);
list-style-type:none;
}
p img {margin-left:5px;}
#wrap{
margin:0px;
padding:0px;
width:100%;
}
/* Header section */
#header{
background:#EEE;
margin:0px 0px 0px 0px;
font-size: 11px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #000000;
border-bottom:0px dotted #fff;
}
#topnav ul
{
padding-left: 0;
margin-left: 5px;
margin:0px 0px 0px 0px;
background-color: #9FB5FF;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
height: 18px;
}
#topnav ul li { display: inline; }
#topnav ul li a
{
padding: 0.2em 1em;
background-color: #9FB5FF;
color: #FFF;
text-decoration: none;
float: left;
border-right: 1px solid #EEE;
}
#topnav ul li a:hover
{
background-color: #F89961;
color: #fff;
}
/* Left positioning */
#left {
width:190px;
margin:0px 0px 10px 0px;
padding:0px 0px 20px 0px;
background-color:#F4F6FB;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:px;
border-top-width:0px;
border-style:solid;
border-right-color:#EFEEEE;
border-bottom-color:#EFEEEE;
border-left-color:#fff;
float:left;
min-height:15px;}
/* Right positioning */
#right {
margin-left: 196px;
background-color: #fff;
min-height: 30px;
text-align: left;
padding: 10px 10px 15px 15px;
min-width: 560px;
color: #000000;
}
/* Footer positioning */
#footer {
background-image:url(images/footer2.gif);
height:55px;
margin:0px 0px 0px 0px;padding:0px;
width:100%;
min-width:760px;
overflow:hidden;
clear:both;
}
#footer img {padding:0px;margin:0px;float:left;}
#footer a {
text-decoration:none;}
/* Right positioning */
#rightcol {
width:180px;
float:right;
min-height:0px;
background-color:#F4F6FB;
margin:0px 0px 0px 10px;
padding:0px;
text-align:center;
}
#stretch {width:760px;height:1px;clear:both;margin:0px 0px 10px 0px;padding:0px;}
.img-centre { margin-right:10px; }
form {margin: 0;padding: 0;
}
/* verticle popout menu */
ul.ectmenu1 {
list-style: none;
border:0px solid;
font-size:11px;
padding:0px;
z-index: 50000;
background-color: #fdedc9;
}
li.ectmenu1 {
border: 1px dotted #DDE4F4;
padding:0px;
background-color:#F4F6FB;
}
li.ectmenuhassub1 a{
display:block;
padding:4px;
background-image:url(images/arrow.gif);
}
li.ectmenuhassub1 a:hover{
display:block;
padding:4px;
background-image:url(images/arrowov.gif);
background-color: #DDE4F4;
color: #6182CA;
}
li.ectmenu1 a{
display:block;
padding:4px;
}
li.ectmenu1 a:hover{
background-color: DDE4F4;
color: #6182CA;
}
div.minicartoneline{
background:#F2F9F7;
}
div.minicartoneline1{
padding:2px;
font: normal 12px Arial, sans-serif;
text-align: center;
color:#333;
}
div.minicartoneline2{
padding:2px;
font: normal 12px Arial, sans-serif;
text-align: center;
color:#333;
}
div.minicartoneline3{
padding:2px;
font: normal 12px Arial, sans-serif;
color:#333;
text-align: center;
}
/* Recently Viewed and mini cart */
TD.mincart {
font-size: 11px;
font-family : Verdana;
float:left
}
P.mincart {
font-size: 11px;
font-family : Verdana;
}
/* One line minicart */
div.minicartoneline{
background:#fff;
}
div.minicartoneline1{
padding:2px;
font: normal 12px Arial, sans-serif;
float:left;
color:#333;
}
div.minicartoneline2{
padding:2px;
font: normal 12px Arial, sans-serif;
float:left;
color:#333;
}
div.minicartoneline3{
padding:2px;
font: normal 12px Arial, sans-serif;
float:left;
color:#333;
}
.page-header-content{
float:left;
margin:5px;
}
.fship {
font-size: 11px;
text-align: center;
color: #0057A9;
padding:0px;
}
/* default page p */
.whyshave {
background-color: #E8F4F0;
line-height:1.2;
padding:10px;
margin:0px 10px 0px 0px;
}
div.detaildescription { width: 90%; padding:5px 20px 5px 5px; margin: 5 auto;}
Yes, many people including me size my widows based upon how many different programs or browsers I have open and use monitors from about 20 to 24"
Please... I have been trying to figure this out since I first asked the Q weeks ago. Thank you ahead of time:-)
|
Edited by - coastalem on 10/01/2012 21:18 |
|
|
dbdave
ECT Moderator
USA
4368 Posts |
Posted - 10/01/2012 : 22:25
|
Hi, on the home page, the tables in the featured products have a fixed width and once the screen width drop to a certain point, it will push the featured products down. Have you tried changing those to a percentage?
On the orderstatus page, you have a div with the class "right" - that is set to a min-width of 560px in your style sheet (style.css line 383).
I did not see your problem in firefox, but it could be that min-width setting is forcing the view order status box to drop.
When I disabled the min-width setting (with the screen forced narrow) the view order status box shrunk into place.
Really it's just trial and error.
Firefox has a really wonderful add on to look at and adjust classes live.
David |
|
|
coastalem
Advanced Member
USA
321 Posts |
Posted - 10/02/2012 : 00:05
|
Thanks David your input is helpful.
In regard to the featured products, when I first noticed the problem and it was at a fixed width to start, I went to the dynamicdisplay.asp file and changed the width to:
<table align="center" width="70%">
There is a dynamic.css but I didn't see anything in there that would address the position aspect for the table...
If there are other places I need to address this then that I didn't find:-)
In regard to the jumping of the main content to where the left nav menu stops this mostly is in IE browsers that I have come across.
I have read a lot about code or java or ??? not sure what but something that helps address the display for IE browsers. But I don't know enough to problem solve if this is an IE specific issue and I need to put some sort of IE css correction code in somewhere??? or a plain vanilla css position issue in the css file.
I know there are several way besides "float" to address the position of ID and classes and perhaps if I want IE browser to display that without the "jump" which happens on all pages, not just the example I posted, then perhaps trying "absolute"??? where the distance from the top and the left can be determined??? I don't think a relative position would be the answer here???
Just thinking out load and hoping for someone with more experience to give me some paths/ideas/more focused ways to go so I don't spend days or hours hunting and pecking in the totally wrong direction.
David, you may be on to something here... this seems like a good place to start... "a div with the class "right" - that is set to a min-width of 560px in your style sheet (style.css line 383).
I did not see your problem in firefox, but it could be that min-width setting is forcing the view order status box to drop. "
If IE treats that different than other browsers, and since I have a liquid layout, maybe that needs to be a percent or something...
Em |
Edited by - coastalem on 10/02/2012 00:12 |
|
|
coastalem
Advanced Member
USA
321 Posts |
Posted - 10/02/2012 : 00:34
|
DAVID... I commented out that css line "you have a div with the class "right" - that is set to a min-width of 560px in your style sheet"
And it solved the jump issue in IE and works in the other browsers too. I do have a few of my own custom pages (like the content and order info) that jump but I think I will be able to figure that out. I want to make them css pages instead of table pages - even though their layout is 95 or 100%. Perhaps, redo them with a "save as" from a page that does not jump now.
Still have the dynamic feature display that jumps right to deal with but this is a start:-) |
|
|
dbdave
ECT Moderator
USA
4368 Posts |
Posted - 10/02/2012 : 08:07
|
In your featured product on the home page each of the products is in table that is hardcoded at 180 px.
quote:
<table class="outerborder" width="180" align="center" border="0" cellpadding="1">
David |
|
|
coastalem
Advanced Member
USA
321 Posts |
Posted - 10/03/2012 : 00:17
|
| Ohh, David good find. I will play around with that. Thank you again for helping out:-) |
|
|
| |
Topic |
|
|
|
| Shopping Cart Software Forum for Ecommerce Templates |
© 2002-2013 ecommercetemplates.com |
|
|
|
Main Content pushes under side bar/s ???
