Tech Support Forum banner
Status
Not open for further replies.
1 - 7 of 7 Posts

·
Design Team
Joined
·
433 Posts
Discussion Starter · #1 ·
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.
 

·
Manager, - Alternative Computing, - Design
Joined
·
6,514 Posts
Re: CSS Nightmare

Hi and welcome back!

So i just looked at the source for your website, and it's a mess. Was this something that your group made or was the website handed to you that way? There are so many comments. Don't get me wrong I love comments and probably put too many in a development version of my sites. That said they don't really need to be in your version that goes online. Next, I am curious as to why you are using a <style> tag followed by a lot of css? Wouldn't it make more sense to great a file for that in the css folder?

As I am going through the code I am seeing some things that might cause problems. You have an opening paragraph tag with out a closing tag, <p class="body">. Anyways you want me to look at some css. So I found the div id's contactInfo which has the div id contactInfoMap inside it. ContactInfo, is being displayed as a table-cell. I am not sure why that is. I am going to have to look into this a little further and break this down to see what is going on if I break it a little bit.

I will be back in a day or so with some answers.
 

·
Design Team
Joined
·
433 Posts
Discussion Starter · #3 ·
Re: CSS Nightmare

RAWR!!! I had typed a response and accidentally refreshed the page.

Alright, so, the table-cell is to align the formWrapper and the contactInfo side-by-side (they both have a table-cell display) without using an actual table, which I'd love to do (it'd solve all my problems).

Next, the internal vs. external CSS. We used external for template-wide CSS and internal for page specific CSS. I agree with exporting it to external, but the instructor overruled me on that.

Third, the comments. Need I say that I understand and agree? The customers have 0 HTML/CSS/JavaScript knowledge. We were instructed to provided as detailed on comments, on every page, so that they could modify the contents without issue. If I had stayed 100% to that, there'd be significantly more comments.

Fourth, I can't find the paragraph tag that doesn't have a close. That first one had encompassed everything except the little blip at the bottom about contacting the office. I just moved that up to only encompass the blip at the top, leaving the divisions to themselves, of course there was no change.

I know its a mess. I, personally, hate divisions, paragraphs, and spans, but we weren't allowed to use tables unless absolutely needed. For this issue, I know it shouldn't be needed, but I also don't know why I can't make it work without it. It has to be in relation to the image, since when I remove it, or replace it, there is no issue, but that also doesn't explain how the hiding of the list bullets would screw up the alignment either.

At this point, any solution short of my rewriting the entire code would be greatly appreciated.
 

·
Registered
Joined
·
5,202 Posts
Re: CSS Nightmare

I already answered this briefly here: [HTML4/CSS] CSS Nightmare - Sysnative Forums

In short: if your not using tables don't try to make divs behave like them...

Honestly, there is nothing wrong with using tables if used correctly.

As for the actual problem, its likely something to do with block level elements...

Not enough time to effectively research it but, floating the divs fixed the issue.
 

·
Design Team
Joined
·
433 Posts
Discussion Starter · #5 · (Edited)
Re: CSS Nightmare

bleh, Well, I wasn going to quote your Sysnative post, but now I'm just going raise a new thing that happens with your solution!

So, Laxer had me replace the "display: table-cell" in the form-wrapper and contactInfo classes with "float: left" and "float: right", respectively. It works for getting rid of that space on the form-side. However, there is still the unexplained line break from where the map is listed in the ul. Simple solution is just to remove the list and padding-left the image, but I want Laxer to find a solution without removing the list!
 

·
Design Team
Joined
·
433 Posts
Discussion Starter · #7 ·
Re: CSS Nightmare

All cleared up. Thank you for the second pair of eyes and fresh mind. Hopefully I won't have another out-of-comfort zone project for a while, but I won't hold me breathe. I'm in a System Analyst course this term...
 
1 - 7 of 7 Posts
Status
Not open for further replies.
Top