Conditional comments

I have a few questions about conditional comments. First of all, they work only for Internet Explorer, right? So, if I have something like:

<!-[if lt IE 9] >

< p > Hi there! < /p >

<! [endif]-->

All modern browsers will see as a comment and move on, right? Older versions of Explorer don't recognize (a) the comment syntax and see the greeting, or (b) just look like a conditional comment that they are supposed to run if they are IE8 or more?

What happens if the old versions of Firefox running through it, or an old version of a non - IE browser... Are they see it as a comment, or what will happen? Something bad?

Thank you!

Standard as HTML comments have always existed and were always ignored by browsers.

The conditional as comments is ignored as a standard comment.

Make sure you just never use you two - at the beginning and at the end of your comments, things like can cause validation problems.

Tags: Dreamweaver

Similar Questions

Using conditional comments for IE7

I'm working on my first attempt to apply a conditional comment. My page seems correct in the lab browser for all browsers except IE7, who needs a change of left padding on a particular div. My main css for this div looks like this:
#div {}
padding-top: 192px;
padding-left: 138px;
height: 38px;
Width: 120px;
position: relative;
}
I have the addition, after the beginning of the div tag in the HTML code:
<!-[if IE 7] >
< style type = text.css >
#div {padding-left: 100px ;}}
< / style >
<! [endif]-->
As I understand it, the main css instructions is still in effect, that only the left padding will change. But when I view the page in the lab browser, the comment by the State has no effect. What Miss me?

Hello

The style of text scrolling is done via the "text_scroll.js" JavaScript file and that's why you can not style using css, the script file has also said that it should not be used as an external file (should be on the page, not a link).

I also noticed that the JavaScript is on the web site of dynamic disk and this site is known for providing the code that only works in specific browsers, it's just one of the reasons why I would suggest looking for other JavaScript code.

PZ

Conditional comments in templates
CS3, Mac (PPC)

Hi, I have a model that has quite naturally all its external CSS files linked from a region NOT editable, and, as I expect, these links are adjusted properly in pages based on a template, everywhere where they reside. Except that is for the link inside a conditional comment (providing CSS) fixed for IE. It will NOT refresh (if I move the file from one directory to another I can see Changing the links for the other CSS files, but the commented it remains unchanged).

Is it because he is seen by DW as being a comment? Are commented links not updated the regular link?
Quote:
Correctimundo. Make the link a root relative. Then, it will not be
has succeeded.

Hmm. Not Management commented links appears as an odd choice on the part of the developers of DW... do you know if it is intended or just an oversight? Conditional comments are hardly obscure, after all, and I sometimes include links that are commented out until a later stage of development. Non of these things is a layer extra set of things to remember.

Well, at least relative to the root thing is a workaround of sorts, as long as I don't forget to change the model before you put the site on the server. Thanks again for your help Murray.

Conditional comments in DW templates
I started to use the conditional comments these days to help target CSS to IE6 and IE7, however Dreamweaver does not appear to understand the links related to the conditional comments and so don't update when used in a template on a site.

For example, if I have:

<!-[if lte IE 6] >
"" < link href = "... / assets/css/screen-ie6.css" rel = "stylesheet" type = "text/css" media = "screen" / >
<! [endif]-->

In a model, usually in the code HTML the relative to the CSS path will update on several pages of the site. But none so if it is in a conditional comment. Instead, I have to use the absolute path ' / assets/css/screen-ie6.css ' which has then stops fully test me the local site on my PC.

Anyone know of a way around this? Or is it to Adobe to make an update for DW for relative pathnames can be re-writings in the DW templates (which would be fine)...

Best wishes
Simon
Of course I do!

http://www.Adobe.com/cfusion/mmForm/index.cfm?name=wishform

--
Murray - ICQ 71997575
Adobe Community Expert
(If you * MUST * write me, don't don't LAUGH when you do!)
==================
http://www.dreamweavermx-templates.com - template Triage!
http://www.projectseven.com/go - DW FAQs, tutorials & resources
http://www.dwfaq.com - DW FAQs, tutorials & resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Studio 24" wrote in message
News:elu5b7$372$1@forums. Macromedia.com...
> just enough - do you know if there is anywhere I can ask Adobe for this
> feature to be added to a future version of DW?

Conditional comment CSS Hack for IE6
Hi, I'm trying to circumvent an IE6 display problem and I tried to use a conditional comment in the head tag to load a specific stylesheet for IE6. Here is my code:

< link href = "css/normal.css" rel = "stylesheet" type = "text/css" / > "
<!-[if IE 6] >
"< link href="css/ie-6.0.css "rel ="stylesheet"type =" text/css"/ >
<! [endif]-->

For some reason any IE6 ignores this.

If I remove the '6' instruction conditional IE6 is applied to the style sheet, but does any other version of IE browsers that isn't what I want.

After searching on the net, put IE 6 should work, but for some reason, this isn't for me.

Any help would be appreciated.

LAGooner
Huh. I guess it must be the IE6 version I use. I downloaded IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage (worth download incidentally) and the hack works great.

Thank you for taking the time to look at it for me.

LAGooner

Manipulate the values of the variables to trigger conditional comments

7.01.237 on Win 7 Pro PC work.
Try to implement the following:
3 responses to survey on a single slide type (think likert with a scale of 1 to 10)
At the end of each of the three questions, select a "submit" button, and give your comments, based on a predetermined for possible values range (between 3 and 30)
Tried setting up of three variables (Q1, Q2, and Q3) and seen the answer buttons to assign a value of 1 to 10 for each variable, then have the total submission button of the Q1, Q2 and Q3 values:
and then display the appropriate text based on the number:
no luck. Tried using the action of the increment to add to the overall value of Total_Q, then perform the masking based on the new value, not going either.
Cannot use "a part of the quiz" because it may in fact be a quiz marked.
Any ideas? I think that I'm not seeing the forest for the trees at this stage.
Justenuf

Try to follow the variables in a text container, do not know how you fill at all. Likert questions does not normally give rise to a score. Once, I wrote a blog about the use of multiple CHOICE for obtaining scores for a type of Likert question:

http://blog.lilybiri.com/graded-survey

Syntax HTML 5 comment

I'm looking for a way to add comments to HTML 5, text of meaning is not running, but is there to help understand the programming. I see not in CSS / * comment * / used for this purpose. In HTML, I see the comments, but it is unclear how they are reported comments.
For example, I saw <! - comment - >, but this syntax also seems to be used for conditional instructions which are executed, as in <!-[if gt IE 8] > <!-->. That looks like it is written in a comment, but obviously, it's supposed to be run. I think so. I just want to be able to quietly add comments in the HTML code, but I need help with the syntax. Thank you!

So far, you've got everything right.

/ * This is a CSS comment * /.

It is a single line comment in JavaScript or PHP code

The conditional comments for IE are ignored by all browsers except IE9, 8, 7, 6.

IE10 pays more attention to the conditional comments.

Nancy O.

Hide a div on condition

I have an annoying < div > that appears on Internet Exploder. For the reasons covered elsewhere, I want hidden.
A < div > hides well. The other is stubbornly visible in IE and I don't want that, except in the context of IE9.
Here is the page:
http://www.hollisinternetmarketing.NET/Patty/patty1.html
And here's what I've done in CSS:
< style media = "all" >
<!-[if lte IE 8] >
{#centertab}
visibility: hidden;
display: none;
}
{#amazon_scroller}
visibility: hidden;
}
<! [endif]-->
< / style >
Obviously, I'm trying to hide the ID #centertab of everything Microsoft did before Internet Exploder 9. Just visibility: hidden; works great for the div #amazon_scroller. It does not work for #centertab.
Why? How can I hide this puppy?

That should be enough for the two-

Note that the conditional comment should be on the OUTSIDE of the

Coding of your Web site is Compatible with IE by using a conditional statement?

Hi all
I'm really bad make my site compatible with Internet Explorer. I know, it does not support the element ' position: fixed ' (which I used), but I heard there was a way around this by inserting a "conditional statement". But I'm really, really difficult to code correctly. Where exactly in the HTML code I place it, and how does the browser know what layer/div, it is assigned to?
Here is the code that defines the changes in IE. As it is, it actually doesn't work properly... it just removes all items on the page... so I know that I made a mistake somewhere.
<!-[if IE 6] >
position: absolute;
top: 20px;
left: 20px;
<! [endif]-->
I don't always know where place them, and how to ensure IE knows what is the code. Can someone help a newbie? I'm way too deep! Www.ameliaharris.110mb.com/ of the Web site if it is of no use.
Thanks in advance.

I had a peek at the CSS on your site, and it uses some of the strangest buildings I've ever seen. For example:
```
unicode-bidi:bidi-override; direction:rtl;
```
What on earth that is all about?

Again, to answer your question, what you are doing wrong with the IE conditional comment, is that it is incomplete. The conditional comment must contain a block of complete style with the regular style rules:
Because you want to override what is in your style sheet, it should come theof the embedded document after links to CSS and external style sheets.

Peck of the list not the same thing as in tutorial 'first site '.

Hi, in the tutorial found here: https://helpx.adobe.com/dreamweaver/how-to/first-website-part4.html , down in the section 'dealing with older browsers", number 10 / (in the Panel code fragments, expand the folder for comments and select less than or equal to IE 7 conditional comment (it's the last item in the file).)
I don't find this line of code in the Panel Snipets.
Which is no longer necessary for older browsers? Is it put there another way? Should I just copy the code and he put it there myself?
Should I ignore that any part of the tutorial and not even put in the code < script type = "text/javascript" src = "js/html5shiv.js" > < / script >
Can I skip this entire section?
Do you need to understand what I'm trying to request more information?

You don't have to worry about IE8 and lower. Their market share in specialized but very specific sites will be in the low 0-1% range.

Your version of the program is more recent than the tutorial you use no doubt and it seems that the clips you're looking for are either moved or gone.

Cannot find excerpts from IE in Dreamweaver CM³

I am going through the tutorials in Dreamweaver CC line. There are often differences between my UI and what is stated in the tutorial, which so far has not been a problem. However, towards the end of the Tutorial 4, it shows the procedure to add a snippet of code in comments file in the Panel code fragments called "Less than or equal to IE 7 conditional comment." My list of extracted files seems very different from what's in the tutorial, and I can't find this excerpt
How can I find this and other extracts that I don't see in my files extracted?
-Stuart

I create my first layout fluid, when I go to the mode live view, overview of the browser or on my server, the images do not appear. What's not?

I have serached for hours. Help, please. Here is my code for the model:
<! doctype html >
<!-[if lt IE 7] > < class = "oldie ie6" html > <! [endif]-->
<!-[if IE 7] > < class = "ie7 oldie" html > <! [endif]-->
<!-[if IE 8] > < class = "ie8 oldie" html > <! [endif]-->
<!-[if gt IE 8] > 
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width = device-width, original scale = 1" >
<!-TemplateBeginEditable name = "doctitle"-->
< title > Studio swim UltimatePerformance < / title >
<! - TemplateEndEditable - >
"" < link href = "... / boilerplate.css" rel = "stylesheet" type = "text/css" >
"" < link href = "... / upss.css" rel = "stylesheet" type = "text/css" >
< style type = "text/css" >
{body
background-color: #dfdfdf;
}
body, td, th {}
do-family: "Gill without ',"Gill Sans MT", 'DejaVu Sans Condensed', 'Myriad Pro', Helvetica, Arial, without serif.
do-size: 12pt;
Color: #666666;
}
a: link {}
color: #1A5DAB;
text-decoration: none;
}
a: visited {}
color: #7794A 3;
text-decoration: none;
}
a: active {}
color: #222222;
text-decoration: none;
}
a: hover {}
text-decoration: none;
color: #7794A 3;
}
< / style >

"< script src ="... / respond.min.js "> < / script >"
<!-TemplateBeginEditable name = "head"->
<! - TemplateEndEditable - >
< / head >
< body >
< div class = "gridContainer clearfix" >
< div id = "div1" class 'fluid' = >
< div class = "navigation" > < span style = "text-align: right;" color: #FFFFFF; "" > < a href = "... / upswimstudio_aboutus.html" > < span style = "color: #FFFFFF" > on inverters </span > < /a > | "< a href ="... / upswimstudio_aboutdouggreen.html "> < span style =" color: #FFFFFF "> on Doug Green </span > < /a > | "< a href ="... / upswimstudio_pricing.html "> < span style =" color: #FFFFFF "> pricing </span > < /a > | "< a href ="... / upswimstudio_location.html "> < span style =" color: #FFFFFF "> location </span > < /a > < / span > < / div >"
"" < div class = "fluid logo" > < img src = "... / pictures/hm_image.jpg" / >
< div class = "body fluid zeroMargin_tablet ' > <!-TemplateBeginEditable name ="body text"-> the text <! - TemplateEndEditable - > < / div >
< / div >
< div class = "fluid greybar" > < / div >
< p > < / p > < p > < / p >
< div class = 'fluid footer' >
< style p = "" are-size: 11pt; "> < a href = 'coming' target = 'new'" > < img src = ""... / images/facbook.png "alt =" "/ > < /a > < a href = 'coming' target = 'new'" > < img src = ""... / images/twitter.png "alt =" "/ > < /a > < a href = 'coming' target = 'new'" > < img src = ""... / images/instagram.png "alt =" "/ > < br >"
< /a > < /p >
< style p = "" are-size: 11pt; "" > < a href = "... / indexfluid.html" > home < /a > < /a > | "< a href ="... / upswimstudio_aboutus.html "> on inverters < /a > |" "< a href ="... / upswimstudio_aboutdouggreen.html "> on Doug Green < /a > |" "< a href ="... / upswimstudio_pricing.html "> < /a > pricing |" "< a href ="... / upswimstudio_location.html "> location < /a > < /p >"
< style p = "" are-size: 11pt; "> < span style =" do-size: 9pt; "" color: #5C5A5A; "" > © 2015 ultimate swim Performance Studio • website designed by < a href = "http://www.tweeagraphicdesign.com" > TweeA graphic Desig < /a > </span > n < / p > '.
< / div >
< / div >
< / div >
< / body >
< / html >

The problem is due to your upss.css file. All the images you have given a width of 0%. Remove and it should work.

IMG, object, embed, {video

Max-width: 100%;

Width: 0%;

}

Nancy O.

two animations oam in a page displayed?

I tested each a solo and they work great but if I import the two that they cease to show? What can I do to fix this...
<! doctype html >
<!-[if lt IE 7] > < class = "oldie ie6" html > <! [endif]-->
<!-[if IE 7] > < class = "ie7 oldie" html > <! [endif]-->
<!-[if IE 8] > < class = "ie8 oldie" html > <! [endif]-->
<!-[if gt IE 8] > 
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width = device-width, original scale = 1" >
< title > PRISMA CREATIVE COMMUNICATIONS < /title >
< link href = "css/boilerplate.css" rel = "stylesheet" type = "text/css" > "
< link href = "css/fluid.css" rel = "stylesheet" type = "text/css" > "
< link href = "css/style.css" rel = "stylesheet" type = "text/css" > "

"< script src="js/respond.min.js "> < / script >
<!-the following script tag downloads a font of Adobe Edge Web server fonts to use in the web page. We recommend that you do not modify it.-->
< script > var __adobewebfontsappname__ = "dreamweaver" < /script >
" < script src =" http://use.edgefonts.NET/quicksand:N3, N4:default.js "type =" text/javascript"> < / script > "
<! - execution of adobe Edge - >
< meta http-equiv = "X-UA-Compatible" content = "IE = Edge" >
< script >
var custHtmlRoot = "" edgeanimate_assets/navTablet/assets / ";"
script var = document.createElement ('script');
script.Type = "text/javascript";
script. SRC = custHtmlRoot+"edge_includes/edge.5.0.1.min.js;
var head = document.getElementsByTagName ('head') [0], done = false;
script. OnLoad = script.onreadystatechange = function() {}
If (! result & & (! this.readyState | this.readyState == 'charge' | this.readyState == 'complete')) {}
= true;
opts var = {}
scaleToFit: "width",
centerStage: "none."
minW: "0px"
maxW: "undefined."
Width: "699px."
height: "125px"
bScaleToParent: 'true '.
};
opts.htmlRoot = custHtmlRoot;
AdobeEdge.loadComposition ('navTablet', 'navTablet', opts,
{« dom » : {}}, {« dom » : {}}) ;
script. OnLoad = script.onreadystatechange = null;
head.removeChild (script);
}
};
head.appendChild (script);
< /script >
< style >
.edgeLoad-navTablet {visibility: hidden ;}}
< / style >
<! - end of Runtime adobe Edge - >
<! - execution of adobe Edge - >
< meta http-equiv = "X-UA-Compatible" content = "IE = Edge" >
< script >
var custHtmlRoot = "" edgeanimate_assets/navHeaderScreen/assets / ";"
script var = document.createElement ('script');
script.Type = "text/javascript";
script. SRC = custHtmlRoot+"edge_includes/edge.5.0.1.min.js;
var head = document.getElementsByTagName ('head') [0], done = false;
script. OnLoad = script.onreadystatechange = function() {}
If (! result & & (! this.readyState | this.readyState == 'charge' | this.readyState == 'complete')) {}
= true;
opts var = {}
scaleToFit: "width",
centerStage: "none."
minW: "0px"
maxW: "undefined."
Width: "1232px."
height: '85px.
};
opts.htmlRoot = custHtmlRoot;
AdobeEdge.loadComposition ('navHeaderScreen', 'navHeaderScreen', opts,
{« dom » : {}}, {« dom » : {}}) ;
script. OnLoad = script.onreadystatechange = null;
head.removeChild (script);
}
};
head.appendChild (script);
< /script >
< style >
.edgeLoad-navHeaderScreen {visibility: hidden ;}}
< / style >
<! - end of Runtime adobe Edge - >
< / head >
< body >
< div class = "gridContainer clearfix" >
< div id = "navScreen" class = "fluid" > ""
< div id = 'Stage2' class = "navHeaderScreen" > < / div >
< / div >
< div id = "navMobile" class = "fluid" > < div id = "logo" > < img src = "images/logo - prisma.gif" alt = "" / > < / div >
< div id = 'slogan' > CREATIVE COMMUNICATIONS < / div > < img src = "images/collaborate - mobil.jpg" alt = "" / > < img src = "images/create - mobil.jpg" alt = "" / > < img src = "images/connect - mobil.jpg" alt = "" / > < img src = "images/inspire - mobil.jpg" alt = "" / > < / div >
< div id = "navTablet" class = "fluid" > ""
< div id = "logo" > < img src = "images/logo - prisma.gif" alt = "" / > < / div >
< div id = 'slogan' > CREATIVE COMMUNICATIONS < / div >
< div id = 'Stage' class = "navTablet" > < / div >
< / div >
< div id = "mobilBanner" class = "fluid" > < img src = "images/mobil - features" alt = "" / > < / div > < div id = "bannerCommunicate" class = 'fluid clearfix' > < img src = images/BC.jpg"" alt = "" / > < / div > "
< div id = "messageBar" class = "fluid blueBkg" > LET'S THE FUN BEGIN & gt; COMMUNICATE WITH the UNIVERSE < / div >
< div id = "mainLeft" class = "darkblue fluid mainContent" > after you have defined and developed your strategy, visuals and content, you are ready to view your message of the project and begin to create the brand. a full range of your message through communication channels.
< /p >
extensive experience < p > Prisma of the multi-platform production, thanks to a custom tailored plan, ensures that delivery is clear and consistent on the target. < /p >
< p > PRISMA offers a variety of services that support your brand, including quotes and sourcing research, print management and cross browser compatibility assurance. These tools when combined with the monitoring and evaluation of the key elements of the research data, ensure that your communications are continuously advanced and received, maximizing the bot their effect and your return on investment. < /p >
< / div >
< div id = "mainRight" class = "darkblue fluid" > ""
"< class p =" blueBarTitles "> < /p > paper"
< div id = "leftColProd" class = "darkblue fluid clearfix" > < ul class = "listProducts" > ""
a strong BUSINESS NEED > < li > < < / strong > < /li >
< /Li > < li > business card
Stationary < li > < /li >
Stickers < li > < /li >
< /li > < li > postcards
The < /li > < li > guest
< Li > < /li > < /ul > menus
< ul class = "listProducts" >
< li > < strong > EDITORIAL < facilities > < /li >
Brochure < li > < /li >
Magazines < li > < /li >
Catalog < li > < /li >
< li > book and covers the layout < /li >
< /ul >
< / div >
< div id = "rightColProd" class = "fluid clearfix" >
< ul class = "listProducts" >
< li > < strong > ENVIRONMENT < facilities > < /li >
< /Li > < li > signage
Banners < li > < /li >
Wayfinding < li > < /li >
< Li > < /li > < /ul > trucks
< ul class = "listProducts" >
< li > < strong PRESENTATIONS > < / strong > < /li >
< li > < strong EVENT PROMOTION > < / strong > < /li >
< li > < ad will BE strong > < / strong > < /li >
Strong EXHIBITION DESIGN > < li > < < / strong > < /li >
< /ul >
< / div >
< class p = "clearfix" > < / p >
< class p = "blueBarTitles" > view < /p >
< div id = "leftColProd" class = "fluid clearfix" >
< ul class = "listProducts" >
Strong INTERFACE DESIGN > < li > < < / strong > < /li >
< Li > sites < /li >
Applications < /li > < li >
< /Li > < li > articles
Presentations Power Point < /li > < li >
< /ul >
< ul class = "listProducts" >
< /li >
< li > < BLOG BOOM > < / strong > < /li >
< /ul >
< / div >
< div id = "rightColProd" class = "fluid clearfix" > < ul class = "listProducts" >
< li > < strong > ONLINE MARKETING < facilities > < /li >
< /Li > < li > emailing campaigns
< /Li > < li > destination pages
< li > SEO < /li >
social media < li > Design & integration < /li >
< /ul >
< / div >
< / div >
< div id = "bottomBox" class = "fluid greenBkg" > < img src = "images/greenBox.gif" alt ="" / > < / div > "
"< div id ="bottomBoxTwo"class ="fluid yellowBkg"> < img src="images/pintrest/create.jpg "class ="centerImage"alt =" "/ > < / div >
< div id = "bottomBoxThree" class = 'fluid darkblueBkg' > <! - Begin MailChimp registration form - >
< div id = "mc_embed_signup" >
< form action="//prismacreativecommunications.us10.list-manage.com/subscribe/post?u=b2324e3ea54f 16fab74603913 & amp; ID = aa94acd787"method ="post"id = 'mc-embedded-subscribe-form' name ="mc-embarque-abonner-form"class ="validate"target ="_blank"novalidate >
< div id = "mc_embed_signup_scroll" >
< div class = "mc-field-group" >
< input type = "email" value = "" name = "EMAIL" class = "required mail" id = "mce-EMAIL" > "
< / div >
< div id = "mce-answers" class = 'clear' >
< div class = 'response' id = "mce-error-response" style = "display: no" > < / div >
< div class = 'response' id = "mce-success-answer" style = "display: no" > < / div >
< / div > <!-real people shouldn't this learn and expect good things - do not delete this nor of danger form bot registration->
< div style = "position: absolute;" left:-5000px; "> < input type ="text"name ="b_b2324e3ea54f16fab74603913_aa94acd787"tabindex ="-1"value =" "> < / div >
< div class = "clear" > < input type = "submit" value = 'FOLLOW"name = 'subscribe' id ="mc-embedded-subscribe"class ="button"> < / div >
< / div >
< / make >
< / div >
<! - end mc_embed_signup - > < / div >
< div id = "bottomBoxFour" class = "fluid" > bbb < / div > ""
< div id = "homeFooter" class = "fluid gradient" > ""
< class p = "hmpgFooterCopy" >
561-906-2583 < br >
[email protected] < br > West Palm Beach, Florida < /p > < / div >
< / div >
< / body >
< / html >

Probably, this can help.

Using compositions dashboard animate reactive in Dreamweaver «Adobe Edge animate Team Blog»

Maximize compatibility with browsers in Dreamweaver CM³

I am new to Dreamweaver CC and wonder if there is a way to maximize compatibility with browsers I design. The site seems perfect on my browser because I have the latest version of Safari and Mac OS, but other people with older browsers have reported see very different things. I explained that different browsers display websites differently and has no way for me to control that once the site is online. However, maybe there is something I can do to minimize the on the front-end server?

Use the best practices of the modern web and HTML code and CSS valid. Errors are the leading cause of browser rendering problems.

CSS - http://jigsaw.w3.org/css-validator/

HTML - http://validator.w3.org/

Either way, you should test your projects in more than one browser. I have FF, Chrome, Safari and IE installed on my workbox.

If your users have older browsers, there are a few tricks of the trade like IE conditional comments that can alleviate some problems, but without seeing a URL, it is impossible to make recommendations.

Nancy O.

How crop you a diagonal pattern in a way that makes tiled for the web?

At the moment I just abandoned and made a huge image and kept to about 800kb for a web context. However, I realize that's not ideal. I can't understand how this model of mosaic. I think there are some crazy math that I must calculate to be included in the importance of the harvest, so that the threshold for images fit perfectly, but I have no idea how to do that. Anyone ran into this situation before and found a solution?

You're hurting! :-)

Use css to solve this problem. Although there is no css property to rotate a background image, you can apply a trick to create the same effect.

(1) save your file with a regular rectangular pattern (17.6 kb):

(2) save this in your image folder in the root of your site.

(3) to create a background rotated to your page, use this:

{body

position: relative;

background: url('.. / img/bgrot.jpg') repeat 0 0;

}

body: before {}

content: "";

position: fixed;

Width: 200%;

height: 200%;

top: 50%;

left: 50%;

z-index:-1;

background: url('.. / img/bgrot.jpg') repeat 0 0;

-webkit-transform: rotate(-20deg);

-moz-transform: rotate(-20deg);

-ms-transform: rotate(-20deg);

-o - transform: rotate(-20deg);

transform: rotate(-20deg);

}

Fact! Much easier and more flexible. To see it work, see the test I did to http://estructor.altervista.org/rotbg/test.html

You can examine the code in your browser.

PS the css transformations are not supported in IE 8 - the background will show again, although (non-tourne). IE8 will be might want to use a conditional comment in your html code to create a conventional background pattern instead.

* Update * I've updated the example with a wrapper page element that uses the same context, but it runs at a different angle. The trick here is to create a sufficiently broad element that covers the entire area. Then you must set the overflow: hidden; to hide the overflow so it contains the background pattern within this box. It takes a bit of tinkering to get work for the height and width values, because it is somewhat dependent on the actual content.

Conditional comments

Similar Questions

Maybe you are looking for