Thu, 2008-07-31 23:41
Hello,
I have built this drupal theme for a friends site.
I am happy with how that site is looks in firefox but when viewed in IE6 there is extra spacing around the “header”
and each of the left hand navigation links “navigation-left”
I have tried…
margin=0px;
padding=0px;
border=0;
clear=both;
I feel like I’m just stumbling around in the dark.
Can anyone please shine some light?
Thank you
S
Fri, 2008-08-01 02:24
#1
Doing a "Drupal theme" are
Doing a "Drupal theme" are we...?
Start by adding a doctype at the top of the document. This will do:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
Add this to your style sheet defaults.css to close the gap you wrote about:
img {display:block;}
Then validate the CSS and markup.
Fri, 2008-08-01 03:36
#2
Thanks for your help david.
Thanks for your help david.
I'm not sure if I did something wrong??? I entered img {display:block;} in the default style sheet but now my page looks like this in IE6.
Regards
S
| Attachment | Size |
|---|---|
| redbus-ie6.jpg | 78.93 KB |
Fri, 2008-08-01 05:04
#3
On the file that is
On the file that is currently on your server, in you have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>The BIG:RED:BUS Trip | The Big Red Bus</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index,follow" /> <meta name="DC.title" content="The BIG:RED:BUS Trip" /> <link rel="shortcut icon" href="/files/redbus_favicon.ico" type="image/x-icon" /> <style type="text/css" media="all">@import "/modules/node/node.css";</style> <style type="text/css" media="all">@import "/modules/system/defaults.css";</style> <style type="text/css" media="all">@import "/modules/system/system.css";</style> <style type="text/css" media="all">@import "/modules/user/user.css";</style> <style type="text/css" media="all">@import "/sites/all/modules/lightbox2/css/lightbox.css";</style> <style type="text/css" media="all">@import "/sites/all/themes/redbus/style.css";</style> <script type="text/javascript" src="/misc/jquery.js"></script> <script type="text/javascript" src="/misc/drupal.js"></script> <script type="text/javascript" src="/sites/all/modules/jquery_update/compat-1.0.js"></script> <script type="text/javascript" src="/sites/all/modules/lightbox2/js/image_nodes.js"></script> <script type="text/javascript" src="/sites/all/modules/lightbox2/js/lightbox.js"></script> <script type="text/javascript" src="/sites/all/modules/jquery_update/collapse-fix.js"></script> <script type="text/javascript">Drupal.extend({ settings: { "lightbox2": { "rtl": false, "file_path": "/(\\w\\w/)files", "base_path": "/", "default_image": "/sites/all/modules/lightbox2/images/brokenimage.jpg", "display_image_size": "", "overlay_opacity": "0.6", "use_alt_layout": false, "disable_zoom": false, "force_show_nav": false, "image_node_sizes": "(\\.thumbnail)", "trigger_image_classes": "img.inline,img.flickr-photo-img,img.flickr-photoset-img,img.image-img_assist_custom,img.thumbnail, img.image-thumbnail", "group_images": true, "disable_for_gallery_lists": true, "disable_for_acidfree_gallery_lists": true, "node_link_text": "View Image Details", "node_link_target": false, "image_count": "Image !current of !total", "lite_press_x_close": "press \x3ca href=\"#\" onclick=\"hideLightbox(); return false;\"\x3e\x3ckbd\x3ex\x3c/kbd\x3e\x3c/a\x3e to close" } } });</script> <script src="/sites/all/themes/redbus/redbus.js" type="text/javascript"> </script> </head> <body>
The character encoding has been listed, twice. Additionally,I forgot that I put IE/6 in quirksmode by intentionally putting an xml declaration above the doctype. Please replace all of the above, with this which includes the xml declaration and correction for the character encoding error on your end:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>The BIG:RED:BUS Trip | The Big Red Bus</title> <meta name="robots" content="index,follow" /> <meta name="DC.title" content="The BIG:RED:BUS Trip" /> <link rel="shortcut icon" href="br_files/redbus_f.ico" type="image/x-icon" /> <style type="text/css" media="all">@import "br_files/node0000.css";</style> <style type="text/css" media="all">@import "br_files/defaults.css";</style> <style type="text/css" media="all">@import "br_files/system00.css";</style> <style type="text/css" media="all">@import "br_files/user0000.css";</style> <style type="text/css" media="all">@import "br_files/lightbox.css";</style> <style type="text/css" media="all">@import "br_files/style000.css";</style> <script type="text/javascript" src="br_files/jquery00.js"></script> <script type="text/javascript" src="br_files/drupal00.js"></script> <script type="text/javascript" src="br_files/compat-1.js"></script> <script type="text/javascript" src="br_files/image_no.js"></script> <script type="text/javascript" src="br_files/lightbox.js"></script> <script type="text/javascript" src="br_files/collapse.js"></script> <script type="text/javascript">Drupal.extend({ settings: { "lightbox2": { "rtl": false, "file_path": "/(\\w\\w/)files", "base_path": "/", "default_image": "/sites/all/modules/lightbox2/images/brokenimage.jpg", "display_image_size": "", "overlay_opacity": "0.6", "use_alt_layout": false, "disable_zoom": false, "force_show_nav": false, "image_node_sizes": "(\\.thumbnail)", "trigger_image_classes": "img.inline,img.flickr-photo-img,img.flickr-photoset-img,img.image-img_assist_custom,img.thumbnail, img.image-thumbnail", "group_images": true, "disable_for_gallery_lists": true, "disable_for_acidfree_gallery_lists": true, "node_link_text": "View Image Details", "node_link_target": false, "image_count": "Image !current of !total", "lite_press_x_close": "press \x3ca href=\"#\" onclick=\"hideLightbox(); return false;\"\x3e\x3ckbd\x3ex\x3c/kbd\x3e\x3c/a\x3e to close" } } });</script> <script src="br_files/redbus00.js" type="text/javascript"> </script> </head> <body>
This renders IE/6, IE/7, and compliant browsers the same on my end. If you do not get similar results, let us know. Once that is settled, you'll want to validate the markup.
Fri, 2008-08-01 05:09
#4
David it might be an
David it might be an approach that you take from time to time, forcing IE=<6 into quirks mode but we have never advised that tactic as we have tended to frown upon any rendering of pages in quirks mode. It really is best not to propose that people, that may not be absolutely clear on the rending modes, start to mix them up.
Fri, 2008-08-01 05:44
#5
I'd suggest you provide the
I'd suggest you provide the OP with a solution to his problem.
Fri, 2008-08-01 06:15
#6
What other solutions do I
What other solutions do I have? it now looks like this.....
gettting more confused....
Thanks for any help!
| Attachment | Size |
|---|---|
| redbus-ie6-2.jpg | 78.96 KB |
