[HTML/CSS] White spacing in IE only? by Durka - TribalWar Forums
Click Here to find great hosting deals from Branzone.com


Go Back   TribalWar Forums > TribalWar Community > General Discussion
Reload this Page [HTML/CSS] White spacing in IE only?
Page 1 of 2
Thread Tools
Durka
Veteran++
Old
1 - 10-27-2009, 18:13
Reply With Quote
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).
 
Durka is offline
 
Sponsored Links
KnightMare
VeteranX
Old
2 - 10-27-2009, 18:20
Reply With Quote
you're using table for layout
 
KnightMare is offline
 
Durka
Veteran++
Old
3 - 10-27-2009, 18:44
Reply With Quote
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
 
Durka is offline
 
HaPpY
VeteranXX
Old
4 - 10-27-2009, 18:45
Reply With Quote
nerds are way too religious about divs vs tables... tables are fine, and superior in many cases
 
HaPpY is online now
 
eMOxygen
VeteranXX
Old
5 - 10-27-2009, 18:47
Reply With Quote
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.
 
eMOxygen is offline
 
Last edited by eMOxygen; 10-27-2009 at 18:51..
havax
VeteranXV
Contributor
Old
6 - 10-27-2009, 18:47
Reply With Quote
hello fellow san antonian

that's right next to the bill millers i go to.
 
havax is offline
 
Last edited by havax; 10-27-2009 at 18:50..
KnightMare
VeteranX
Old
7 - 10-27-2009, 18:54
Reply With Quote
Quote:
Originally Posted by HaPpY View Post
nerds are way too religious about divs vs tables... tables are fine, and superior in many cases
satan uses tables for layouts
 
KnightMare is offline
 
PrinceVince
VeteranX
Old
8 - 10-27-2009, 18:56
Reply With Quote
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!
 
PrinceVince is offline
 
Durka
Veteran++
Old
9 - 10-27-2009, 18:57
Reply With Quote
Quote:
Originally Posted by eMOxygen View Post
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.
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.

Quote:
Originally Posted by havax View Post
hello fellow san antonian

that's right next to the bill millers i go to.
Yep. I work at the clinic so I frequent that BM
 
Durka is offline
 
Gringo
VeteranXV
Old
10 - 10-27-2009, 19:09
Reply With Quote
heres what i see on IE7:



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
 
Gringo is offline
 
eMOxygen
VeteranXX
Old
11 - 10-27-2009, 19:09
Reply With Quote
Quote:
Originally Posted by Durka View Post
As far as the image in a different cell, can you explain this more in-depth? Not sure what you mean by expanded dynamically..
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 ****. 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.
 
eMOxygen is offline
 
Gringo
VeteranXV
Old
12 - 10-27-2009, 21:01
Reply With Quote
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>***8211;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>***8211; 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>***8211; 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>***8211; 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>
Attached Files
File Type: zip blahtest2.zip (4.7 KB, 1 views)
 
Gringo is offline
 
Last edited by Gringo; 10-27-2009 at 21:30..
Durka
Veteran++
Old
13 - 10-27-2009, 22:43
Reply With Quote
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
 
Durka is offline
 
Last edited by Durka; 10-27-2009 at 22:56..
MC Hamster
VeteranXX
Contributor
Old
14 - 10-27-2009, 22:58
Reply With Quote
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.
 
MC Hamster is offline
 
Durka
Veteran++
Old
15 - 10-27-2009, 23:02
Reply With Quote
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.
 
Durka is offline
 
?B-MAN
VeteranX
Old
16 - 10-28-2009, 01:48
Reply With Quote
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.
 
?B-MAN is offline
 
Last edited by ?B-MAN; 10-28-2009 at 03:04..
Durka
Veteran++
Old
17 - 10-28-2009, 06:26
Reply With Quote
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.
 
Durka is offline
 
Torks
VeteranXX
Old
18 - 10-28-2009, 07:12
Reply With Quote
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...
 
Torks is offline
 
Durka
Veteran++
Old
19 - 10-28-2009, 07:32
Reply With Quote
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.
 
Durka is offline
 
Gringo
VeteranXV
Old
20 - 10-28-2009, 08:43
Reply With Quote
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.
 
Gringo is offline
 
Page 1 of 2
Reply


Go Back   TribalWar Forums > TribalWar Community > General Discussion
Reload this Page [HTML/CSS] White spacing in IE only?

Social Website Bullshit

Tags
i want to fuck twiggy


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


AGENT: claudebot / Y
All times are GMT -4. The time now is 02:10.