[HTML/CSS] White spacing in IE only?

D

Durka

Can't trace it back to my divs because they've all got 0 margin, spacing, and padding. If you can, please take a look and help me figure out why there is a space below "click here for immediate..." It works fine in FF.

I-10 Pet Emergency

Thanks a lot guys. Stuck here for days :(

[EDIT]
I know the webpage has other problems, just troubleshooting this one part for a friend (it is his website).
 
Using tables with css is commonly accepted. Divs are better, but full div display isn't always the best way.

Any real advice is greatly appreciated :)
 
nerds are way too religious about divs vs tables... tables are fine, and superior in many cases
 
This is what I use without difference in IE or Firefox. This gives me tight tables with 0 gap.

table
{
padding: 0px;
border-spacing: 0px;
border-width: 0px;
border-collapse: collapse;
}

td
{
border-width: 0px;
padding:0px;
vertical-align: middle;
}

Plus you have way too much stuff in 1 table cell, If you're going to go with tables , use more tables and cells with less crap in each table. The emergency images should be in it's own cell. When an a cell is expanded dynamically it can have odd effects, especially in IE.
 
Last edited:
hello fellow san antonian :wave:

that's right next to the bill millers i go to.
 
Last edited:
value: 0px can be written as value: 0, just to throw that in.

Personally, i recommend to use some type of reset.css to get an equal starting point for all browsers. It gives you a better feel for your CSS parameters and what they do, if you build them up from 0.

Well, good luck with the site!
 
eMOxygen said:
Plus you have way too much stuff in 1 table cell, If you're going to go with tables , use more tables and cells with less crap in each table. The emergency images should be in it's own cell. When an a cell is expanded dynamically it can have odd effects, especially in IE.
Click to expand...

I'll try your method with the CSS code. As far as the image in a different cell, can you explain this more in-depth? Not sure what you mean by expanded dynamically.. And my problem with image in a different cell, is it possible to wrap text around it still? I guess that sounds possible.. I'm slowly learning.

havax said:
hello fellow san antonian :wave:

that's right next to the bill millers i go to.
Click to expand...

Yep. I work at the clinic so I frequent that BM :)
 
heres what i see on IE7:

i10img.PNG


so I'm curious what your end result is trying to look like.

tables are fine to use, but are really recommended for tabular data, not really layouts of pages (anymore, but yeah too many people are uppity about that debate).

also, word to SA billah millahs. mine is over at bitters & 281 :D
 
Durka said:
As far as the image in a different cell, can you explain this more in-depth? Not sure what you mean by expanded dynamically..
Click to expand...

This is how I would build the emergency table:

<table>
<tr><td><img /></td></tr>
<tr><td><a>Click here for immediate assistance</a></td></tr>
</table>


What I mean by expanding dynamically is.. Lets say you have a 150px wide image and some text below it. If the text is shorter then the image everything is good. If the text is longer then the image, then browsers have to figure out where you want shit. If you don't have you're alignments right or a specified table width, the width of the text can push your table out to do odd things.

When I'm building a site I look at it in terms of a grid and nest tables. Some people I've worked with hated it, some like it. It's old-school but it works for all browsers and that why I still do it.

I like to use CSS as salt bring out the flavors in a site to borrow from cooking terms.
 
was bored, fwiw example of div-only layout. very basic, left in hardcoded styles, and replaced the menu with an additional jquery-based menu (the css-based wasn't working for me on IE7). if you want it, i attached the .htm and .js files.

edit: wandered upon your other thread asking about includes, and people were referring to a virtual method. for simple html, just use

Code: 
<!-- include #file="yourfilehere.html"-->

Code: 
    <div style="width:800px; margin:0 auto; border:1px solid black;">
        <div style="padding:0; margin:0;">
            <img src="banner.jpg" alt="I-10" />
        </div>
        <div id="myslidemenu" class="jqueryslidemenu">
            <ul>
              <li><a>Home</a>
                <ul>
                  <li><a href="address.html" title="Main">Main</a>
                    <ul>
                      <li><a href="address.html" title="Address">Address</a></li>
                      <li><a href="address.html" title="Contact">Contact</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>

            <ul>
              <li><a>Services</a>
                <ul>
                  <li><a href="emergency.html" title="Emergency">Emergency</a></li>
                  <li><a href="diagnostics.html" title="Diagnostics">Diagnostics</a></li>
                  <li><a href="surgery.html" title="Surgery">Surgery</a></li>
                  <li><a href="exotics.html" title="Exotics">Exotics</a>
                    <ul>
                      <li><a href="exoticsCC.html" title="Critical Care">Critical Care</a></li>
                      <li><a href="exoticsforms.html" title="Forms">Forms</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>

            <ul>
              <li><a>Affiliates</a>
                <ul>
                  <li><a href="http://www.savrs.com/" title="Referral">Referral</a>
                     <ul>
                        <li><a href="http://www.savrs.com/" title="SAVRS">SAVRS</a></li>
                     </ul>
                    </li>
                  <li><a href="day.html" title="Day Practice">Day Practice</a>
                    <ul>
                      <li><a href="day.html" title="North Central">North Central</a>
                          <ul>
                             <li><a href="http://www.petsfirstvet.com/" title="Pets First">Pets First</a></li>
                          </ul>
                      </li>
                      <li><a href="day.html" title="Northwest">Northwest</a>
                          <ul>
                             <li><a href="http://www.babcockhills.com/" title="Babcock Hills">Babcock Hills</a></li>
                             <li><a href="http://heritageanimalhospitalsa.com/" title="Heritage">Heritage</a></li>
                          </ul>
                      </li>
                      <li><a href="day.html" title="Helotes">Helotes</a>
                          <ul>
                             <li><a href="http://hillcountryanimalhospital.com/" title="Hill Country">Hill Country</a></li>
                          </ul>
                      </li>
                      <li><a href="day.html" title="Leon Springs">Leon Springs</a>
                          <ul>
                             <li><a href="http://www.leonsprings.com/ourhospital.html" title="Leon Springs">Leon Springs</a></li>
                          </ul>
                      </li>
                      <li><a href="day.html" title="Boerne">Boerne</a>
                             <ul>
                               <li><a href="http://bergheimpetvet.com/" title="Bergheim">Bergheim</a></li>
                               <li><a href="boernevet.html" title="Boerne Vet">Boerne Vet</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>							

            <ul>
              <li><a>Team</a>
                <ul>
                  <li><a href="doctors.html" title="Doctors">Doctors</a>
                      <ul>
                          <li><a href="yeltatzie.html" title="Samantha Yeltatzie, DVM">Samantha Yeltatzie, DVM</a></li>
                          <li><a href="finkelstein.html" title="Ariana Finkelstein, DVM">Ariana Finkelstein, DVM</a></li>
                          <li><a href="bennett.html" title="Brad Bennett, DVM">Brad Bennett, DVM</a></li>
                      </ul>
                  </li>
                  <li><a href="technicians.html" title="Technicians">Technicians</a>
                      <ul>
                          <li><a href="danielle.html" title="Danielle Irwin">Danielle Irwin</a></li>
                          <li><a href="stephen.html" title="Stephen Jeffreys">Stephen Jeffreys</a></li>
                          <li><a href="tim.html" title="Tim Martinez">Tim Martinez</a></li>
                          <li><a href="leo.html" title="Leo Frias">Leo Frias</a></li>
                          <li><a href="brian.html" title="Brian Young">Brian Young</a></li>
                          <li><a href="tiffany.html" title="Tiffany Geisen">Tiffany Geisen</a></li>
                          <li><a href="rachel.html" title="Rachel Paulson">Rachel Paulson</a></li>
                          <li><a href="marika.html" title="Marika Austad">Marika Austad</a></li>
                          <li><a href="juan.html" title="Juan Serna">Juan Serna</a></li>
                      </ul>
                  </li>
                  <li><a href="receptionists.html" title="Receptionists">Receptionists</a>
                    <ul>
                      <li><a href="tammy.html" title="Tammy Weaver">Tammy Weaver</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>	

            <ul>
              <li><a>Contact Us</a>
                <ul>
                  <li><a href="address.html" title="By Phone">By Phone</a></li>
                  <li><a href="address.html" title="By Email">By Email</a></li>
                  <li><a href="address.html" title="Address">Address</a></li>
                </ul>
              </li>
            </ul>
        </div> 
        
       <!-- -->
              
        <div style="float:left;">
            <img src="boxtop.jpg" alt="boxtop">
            <div id="slide_box" style="height:0px; overflow-y:hidden;">
                <ul>
                    <li>Remain calm.</li>
                    <li>Call your primary care veterinarian.</li>
                    <li>Tell us the nature of the emergency.</li>
                    <li>Be careful.</li>
                    <li><a href="">Location and Directions</a></li>
                </ul>
            </div>
            <div style="text-align:center;">
                <a href="javascript:;" onclick="Slide();"><span id="arrow">Click here for immediate assistance</span></a>
            </div>
        </div>

       <!-- -->
        
        <div style="float:left;">
            <img src="emergency/map.jpg" alt="location" />
        </div>

       <!-- -->
        
        <div style="float:left; padding:4px;">
            <span style="font-family: Tahoma; font-size: 14px; color:#df1327;">In Case of Emergency</span>
            <ul>
                <li><span style="font-family: Tahoma; font-size: 12px; color:#364479;"><b>Remain Calm</b>–You are helping your pet the most by staying calm and seeking professional care.</li>
                <li><span style="font-family: Tahoma; font-size: 12px; color:#364479;"><b>Call Your Primary Care Veterinarian</b>– If unavailable call us 210-691-0900</li>
                <li><span style="font-family: Tahoma; font-size: 12px; color:#364479;"><b>Tell Us The Nature of the Emergency</b>– We will give you instructions on handling your pet and directions to the hospital</li>
                <li><span style="font-family: Tahoma; font-size: 12px; color:#364479;"><b>Be Careful</b>– When pets are injured they may bite. Even the most loving pet can act out-of-character when they are sick or injured.</li>
            </ul>
            <span style="font-family: Tahoma; font-size: 14px; color:#df1327;">Call (210) 691- 0900 With Any Questions        
        </div>
        
       <!-- -->
        
        <div style="clear:both;"></div>
 
       <!-- -->
        
        <div style="float:left; padding:10px;">
            <a href="http://voices.mysanantonio.com/emergencyvets/" style="border:0;"><img src="blogs.jpg" alt="emergency"></a>
        </div>
          
       <!-- -->
        
        <div style="padding:10px; text-align: justify; font: 12px verdana; margin: 0px; border-top:1px solid black;">
            <span>The veterinarians at I-10 Pet Emergency give an exclusive 'behind the scenes look' at specific cases and share their expertise about current pet health topics. Dr. Samantha Yeltatzie, Dr. Ariana Finkelstein and Dr. Brad Bennett welcome your comments and questions and advise all pet owners to contact their primary care veterinarians directly with any concerns about a pet's health. Please visit <a href="http://voices.mysanantonio.com/emergencyvets/">MySA Blogs</a> to view our most recent additions!</span>
        </div>
        
       <!-- -->
        
        <div style="clear:both;"></div>
   
       <!-- -->
        
        <div style="width:100%; background-color: #687d97; text-align: center; ">
            <span style="font: bold 12px/17px arial, helvetica, sans-serif; text-transform: uppercase; color:Black;">10822 Fredericksberg Rd. San Antonio, TX 78249 PHONE 210-691-0900, FAX 210-737-7372</span>
        </div>
   
       <!-- -->
        
    </div>
 
Last edited:
Thanks for your help, although I haven't started messing with the code. I'd like to transition to divs only, but I'm hesitant because I've tried before and didn't seem to really know how to do it.

What I'm trying to achieve is the dropdown box inside a cell above the blogs cell, both same width (width of the image reading "Emergency?") Looks great in firefox..

[EDIT]
Sorry for the slow response, emergencies kinda have priority :p
 
Last edited:
not having actually looked at the page, or the code, I thought I should point out one thing, just in case:

IE can't count.


that is, it renders in bizarro ways that mean you can have a group of divs adding up to 100% page width, and it'll still leave white space around the place.

So just in case it's just that.. yeah, IE is broken. If there's a workaround for that I've never come across, feel free to share, folks.
 
Messed around with the zip you gave me.. can't seem to get the layout to work properly, looks funny. LOVE what you've done with the menu effects. Wish I was that savvy.. I'm trying to get there but I'm a slow learner with any form of coding. Some day haha.
 
I would try not using tables like other have mentioned. Anyway that link
is wrapped in a span tag with the id arrow. Add this to your css.

#arrow {
margin:0;
padding:0
}

note: your site is whacked in IE7 and I cant imagione how it looks in IE6. You've got classes and id's with styles applied to tables and td's its crazy. My suggestion only works in IE8 standards mode. You're facing the pain that is IE and using tables for layout.
 
Last edited:
I don't understand CSS all that well. I've learned everything I have just from reviewing websites and trying to figure out how they used it. I wish IE wouldn't be such a POS program. Wish Mozilla could buy it out.
 
IE8:



Could you post a sreenshot of what it looks like in FF. To be honest I'm not realy sure what you mean with white spacing...
 
I am color blind so it might not be white (in fact, half the time I have to screenshot and open PS to verify if a color is really white or a blue etc etc). The light blue box containg the words "Click here for immediate assistance" is not supposed to have the white(?) space beneath it, between itself and the Emergency blogs box beneath.

FF looks exactly like IE8 but without said space.

[edit]
The white space may be gray. Sorry, colorblind.
 
the whole area of "Emergency?" and then clicking to reveal the same steps on the right is redundant and should probably go. You might want to simplify the design and layout before messing with it anymore and make it easier on yourself. I couldn't imagine users coming to the site for emergency information being WOWed by a sliding, hidden div while their animal seizes up on the floor.
 
You must log in or register to reply here.
Back
Top