?
Solved

Large gap between info.

Posted on 2011-05-09
11
Medium Priority
?
271 Views
Last Modified: 2012-05-11
please visit:

http://test.huskyshoponline.com/facadoptionform3.aspx
 
(if you need to authenticate, use "mike" as both username and password, all lowercase)

and see if you can please help me find why such a large gap between the "continue" button and the information at the bottom of the page (you may have to scroll to see it).

Just trying to pinpoint the CSS so I can change it, thanks!
0
Comment
Question by:Tom Knowlton
  • 5
  • 4
  • 2
11 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35721748
Remove your height attributes at line 777 and 708. Currently you have a height of 100% and a min-height of 720p. If you remove this, you will get the results I believe you are looking for.

Here are the screenshots.

 Firefox 4 IE8
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35721787
Also, it looks like this ID is being declared in two places in your CSS (#facultyWrapper).

I would highly recommend NOT doing this.

Also, if you would so choose, you could also change the height property to

height: auto;

Open in new window


This will also give you the results you would like, though it should default to this even if it isn't declared.

If for some reason this particular ID needs the current properties to work elsewhere on the site, I would recommend making a new custom ID for this page to hold the elements with the recommended properties.
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 35721827
Having a hard time finding line 777 and 708.

Are you referring to a CSS file?  What is the file named?

Perhaps post the name of the class or ID so I can find the spot quicker.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Accepted Solution

by:
jonahzona earned 1800 total points
ID: 35721859
The id is #facultyWrapper. It is being declared in two locations.

I guess it is in TWO stylesheets. One is called UConnColors.css (line 777)

The other is called ie7.css (line 708, and this IS loading in Firefox.so there is issues there as well).
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 35721910
add height :auto to this div:

<DIV id="facultyWrapper" style="HEIGHT: auto">

somehow it is set to %100
0
 
LVL 61

Assisted Solution

by:HainKurt
HainKurt earned 200 total points
ID: 35721913
I guess it is here

/* Rule N°70 from App_Themes/UCONN/ie7.css */
#facultyWrapper {
      PADDING-RIGHT: 2px;
      MIN-WIDTH: 695px;
      PADDING-LEFT: 8px;
      MIN-HEIGHT: 720px;
      FLOAT: left;
      PADDING-BOTTOM: 0px;
      MARGIN: 0px 4px 0px 8px;
      WIDTH: 695px;
      PADDING-TOP: 0px;
>>>>>>>      HEIGHT: 100%; >>> remove this
      BACKGROUND-COLOR: #fff;
      TEXT-ALIGN: left
}
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 35721981
Thanks gentlemen!

That was it!

Tom

Can you give me steps to find this?  How did you find it?  I would like to improve my CSS debugging skills.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35722006
@Knowlton

I use Firebug for Firefox and the built-in developer tools to IE after version 8. Hope that helps.
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 35722030
Do you know Chrome's tools?

I'd like to see how I can do it in Chrome.


If not, please give me steps to how you found the problem in Firebug.  I do have Firebug installed.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35722041
@Knowlton

Firebug has a lite version for Chrome.

With Firebug I will simply go three and delete elements of the HTML till I find the problem div. Then from there I simply edit the CSS in the right pane until i can get the problem resolved.
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 35722107
Okay.  :)

Thanks again!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses
Course of the Month14 days, 7 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question