[SOLVED] [HTML4/CSS] CSS Nightmare

[AoN]

I posted this on TSF, but I think I'll get a quicker/better response here. The TSF thread can be found here: CSS Nightmare - Tech Support Forum

Alright, I know, I'm a staff member, I shouldn't be asking for help. Well I am!

To see the issue, go to Helping Hands Home Services - Contact Us

Now, for the explanation. This was a group project for school for a legitimate customer. My group won the contract and the customer requested some modifications. All of them were implemented fine except one, moving the Google maps to the top of the column.

If you view the page in IE, it works perfectly fine. In any other browser, it puts a giant space before the form. I've figured out that if I disable the list-style-type and display attributes on lines 207 and 208, it will remove the space from before the form. It also reveals the bullets of the lists (I can hide all of them again in a separate CSS call) and reveals a break in the page for the bullet containing the map.

Looking at the code, I determined that changing the display forced the line break, but is also causing the space above the form because the form is aligning to the top of the line for the bullet. Beyond that, I can't explain where that line break came from, nor why hiding the list bullets would cause this issue. It seems that I can't have either the display: block; or the list-style-type: none; enabled on that list, because both cause the issue.

What boggles my mind even more, I've determined that if I remove the <img> and just have text, there are no issues at all.

I'm good with CSS, but as a programmer, I love tables. Using <div>'s and <p>'s is murder for me. I've even tried removing the <img> from the list and have it stand alone, but had no change in the spacing effect.

Any ideas or suggestions that do not involve me rewriting the entire page or removing it from the <div> would be greatly appreciated.

I'm so sorry I only seem to come back here when I need help. I'm just so busy with school (I'm a senior in charge of the web club) and work.

 

[Laxer]

Display: table-cell? :banghead:

Replace:

   .form-wrapper
   {
    display: table-cell;
    margin: 0px auto;
    width: 490px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 20px;
   }
   div.contactInfo
   {
    display: table-cell;
    margin: 0px;
    padding: 0px;
    height: 100%;
   }

With:

   .form-wrapper
   {
    float: left;
    margin: 0px auto;
    width: 490px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 20px;
   }
   .contactInfo
   {
    float: right;
    margin: 0px;
    padding: 0px;
    width: 370px;
   }

Sorry it took so long, I literally got myself banned from the website... :lolg:

Also, if I had more time I would have destroyed about half this code but, it's finals week and I should be focusing on school :grin1:

 

[AoN]

Wow, I can't believe I didn't think of that. Here I used table-cell to prevent having to float them.

As for the code, I don't much care. It's not my style of coding and my group won, so bleh. You've seen my HTML coding preferences, tables tables tables. There's not compatibility issues or questions of alignment with them. Sure, it CAN make it a LITTLE harder to modify the overall template or make it mobile-compatible, but at least it works without the headache!

I'll link the solution on TSF. Thank you. ^^



Edit:
I retract my earlier statement! There is still the line break above the image from the list entry, and it isn't because of the width of the image. So, you're still up, Laxer!

Thanks for the float, though, I can at least show it and expect the customer not to even notice the line break.

 

[Laxer]

That's not a line break....

That's an indentation because your image is in an unorganized list....


I think you can fix this one... :grin1:

My solution:

Read More:

There is no need for the image to be in the UL... It appears you are using it to have it line up with the other items but, why not just do that with padding?

Hint: a UL is generally padded in 40px although this can change from browser to browser so it's best to define both your UL and your padding...

Or better yet, just remove everything in the column from lists and margin it over....

On a side note, please please please remove the text in the text input boxes on focus...

If you're limited to HTML4 just add the following to each <input type=text> tag

onfocus="this.value==this.defaultValue?this.value='':null"

 

[AoN]

That's all controlled with JavaScript provided to use with instructions to use for the form. All I did with it was add advanced validation methods for the US phone numbers and ZIP codes.

As for your solution from TSF, was the second thing I had come up with myself, first having been to try padding. ^^'

We all need a second pair of eyes or a second mind for these out-of-comfort zone projects.

 

[Laxer]

Well of course, I am always glad to help. :wave: